@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

package/components/radio/demo/api.md

@@ -11,6 +11,7 @@
 | [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.       |
 | [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. |
@@ -59,6 +60,7 @@
 | [id](#id)       | `id`       | `string`  |         |                                                  |
 | [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.                     |
 | [tabIndex](#tabIndex) | `tabIndex` | `number`  | -1      |                                                  |
 | [value](#value)    | `value`    | `string`  |         |                                                  |
@@ -92,6 +94,12 @@ The following example illustrates the default use of the `<auro-radio>` custom e
   <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
   <!-- 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:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -101,6 +109,12 @@ The following example illustrates the default use of the `<auro-radio>` custom e
 <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 ```
 <!-- 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:END -->
+</div>
 </auro-accordion>
 
 ### Default Group
@@ -118,20 +132,39 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
   </auro-radio-group>
   <!-- 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>
+    <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>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
-
-```html
-<auro-radio-group>
-  <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>
-  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
+  ```html
+  <auro-radio-group>
+    <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>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></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>
+    <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>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Checked
@@ -149,20 +182,39 @@ Use the `checked` attribute to pre-select a `<auro-radio>` element.
   </auro-radio-group>
   <!-- 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>
+    <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>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checked.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/checked.html -->
-
-```html
-<auro-radio-group>
-  <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>
-  <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checked.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/checked.html -->
+  ```html
+  <auro-radio-group>
+    <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>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </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>
+    <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>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Disabled
@@ -181,31 +233,62 @@ Use the `disabled` attribute to disable singular `<auro-radio>` elements or the
   <auro-radio-group 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"></auro-radio>
+    <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- 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>
+    <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>
+    <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>
     <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-
-```html
-<auro-radio-group>
-  <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 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"></auro-radio>
-  <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+  ```html
+  <auro-radio-group>
+    <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 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>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </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>
+    <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>
+    <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>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Error
@@ -225,20 +308,39 @@ A custom error message can be set using the `error` attribute, or it can be used
   </auro-radio-group>
   <!-- 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">
+    <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>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
-
-```html
-<auro-radio-group 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>
-  <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
+  ```html
+  <auro-radio-group 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>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </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">
+    <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>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Horizontal Group
@@ -443,12 +545,14 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
 ```scss
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+
 :host {
   // auro-radio-group colors
   --ds-auro-radio-group-label-color: inherit;
 
   // auro-radio colors
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
+  --ds-auro-radio-btn-border-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
   --ds-auro-radio-btn-fill-color: transparent;
   --ds-auro-radio-btn-inset-color: transparent;
   --ds-auro-radio-label-color: inherit;

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

@@ -70,11 +70,11 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
 
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t();}(0,function(){function e(e){var t=true,n=false,o=null,d={text:true,search:true,url:true,tel:true,email:true,password:true,number:true,date:true,month:true,week:true,time:true,datetime:true,"datetime-local":true};function i(e){return !!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""));}function u(e){t=false;}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c);}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=false,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c));}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=true);},true),document.addEventListener("mousedown",u,true),document.addEventListener("pointerdown",u,true),document.addEventListener("touchstart",u,true),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=true),a());},true),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target);},true),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=true,window.clearTimeout(o),o=window.setTimeout(function(){n=false;},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")));},true),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""));}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready");}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",false,false,{});}window.dispatchEvent(t);}"undefined"!=typeof document&&e(document);});
 
-var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:50%;left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
+var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:50%;left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
 
-var colorCss$2 = i$5`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #cc1816)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #cc1816)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}`;
+var colorCss$2 = i$5`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]){--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark].focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
 
-var tokenCss = i$5`:host{--ds-auro-radio-group-label-color: inherit;--ds-auro-radio-btn-border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);--ds-auro-radio-btn-fill-color: transparent;--ds-auro-radio-btn-inset-color: transparent;--ds-auro-radio-label-color: inherit;--ds-auro-radio-tap-color: transparent}`;
+var tokenCss = i$5`:host{--ds-auro-radio-group-label-color: inherit;--ds-auro-radio-btn-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-radio-btn-fill-color: transparent;--ds-auro-radio-btn-inset-color: transparent;--ds-auro-radio-label-color: inherit;--ds-auro-radio-tap-color: transparent}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -155,6 +155,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @attr {Boolean} disabled - If set to true, the radio button will be non-clickable.
  * @attr {Boolean} required - Defines element as required.
  * @attr {Boolean} error - If set to true, sets an error state on the radio button.
+ * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
  * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
@@ -170,6 +171,7 @@ class AuroRadio extends r {
     this.disabled = false;
     this.required = false;
     this.error = false;
+    this.onDark = false;
     this.tabIndex = -1;
 
     /**
@@ -205,6 +207,10 @@ class AuroRadio extends r {
         type: Boolean,
         reflect: true
       },
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
       id:       { type: String },
       label:    { type: String },
       name:     { type: String },
@@ -397,7 +403,7 @@ const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litSta
 
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
 
-var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default)}`;
+var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -750,11 +756,11 @@ class AuroDependencyVersioning {
   }
 }
 
-var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
 var styleCss = i$5`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
-var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
+var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -841,6 +847,7 @@ class AuroHelpText extends r {
     super();
 
     this.error = false;
+    this.onDark = false;
     this.hasTextContent = false;
 
     AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
@@ -879,6 +886,14 @@ class AuroHelpText extends r {
         type: Boolean,
         reflect: true,
       },
+
+      /**
+       * If declared, will apply onDark styles.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      }
     };
   }
 
@@ -964,6 +979,7 @@ var helpTextVersion = '1.0.0';
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
  * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
+ * @attr {Boolean} onDark - Applies dark mode styles to the component.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
@@ -983,6 +999,7 @@ class AuroRadioGroup extends r {
     this.validity = undefined;
     this.value = undefined;
     this.optionSelected = undefined;
+    this.onDark = false;
 
     /**
      * @private
@@ -1041,6 +1058,10 @@ class AuroRadioGroup extends r {
         type: Boolean,
         reflect: true
       },
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
       required: {
         type: Boolean,
         reflect: true
@@ -1151,6 +1172,12 @@ class AuroRadioGroup extends r {
       });
     }
 
+    if (changedProperties.has('onDark')) {
+      this.items.forEach((el) => {
+        el.onDark = this.onDark;
+      });
+    }
+
     if (changedProperties.has('error')) {
       this.validate(true);
     }
@@ -1379,11 +1406,11 @@ class AuroRadioGroup extends r {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} large part="helpText">
+          <${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} large role="alert" error aria-live="assertive" part="helpText">
+          <${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/radio/demo/index.html

@@ -22,7 +22,8 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
   </head>

package/components/radio/demo/index.md

@@ -34,6 +34,12 @@ This is a default configuration of `<auro-radio>`.
   <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
   <!-- 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:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -43,6 +49,12 @@ This is a default configuration of `<auro-radio>`.
 <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 ```
 <!-- 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:END -->
+</div>
 </auro-accordion>
 
 ### Default Group
@@ -60,18 +72,37 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
   </auro-radio-group>
   <!-- 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>
+    <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>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
-
-```html
-<auro-radio-group>
-  <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>
-  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
+  ```html
+  <auro-radio-group>
+    <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>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></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>
+    <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>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>