@aurodesignsystem/auro-formkit 3.5.0 → 4.0.0-rc-658.1

package/components/menu/dist/index.js

@@ -124,61 +124,6 @@ function arrayConverter(value) {
   throw new Error('Invalid value: Input must be an array or undefined');
 }
 
-/**
- * Compare two arrays for equality.
- * @private
- * @param {Array} arr1 - First array to compare.
- * @param {Array} arr2 - Second array to compare.
- * @returns {boolean} True if arrays are equal.
- */
-function arraysAreEqual(arr1, arr2) {
-  // If both arrays undefined, they are equal (true)
-  if (arr1 === undefined || arr2 === undefined) {
-    return arr1 === arr2;
-  }
-
-  // If arrays have different lengths, they are not equal
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-
-  // If every item at each index is the same, return true
-  for (let index = 0; index < arr1.length; index += 1) {
-    if (arr1[index] !== arr2[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Compares array for changes.
- * @private
- * @param {Array|any} newVal - New value to compare.
- * @param {Array|any} oldVal - Old value to compare.
- * @returns {boolean} True if arrays have changed.
- */
-function arrayOrUndefinedHasChanged(newVal, oldVal) {
-  try {
-    // Check if values are undefined or arrays
-    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
-
-    // If non-array or non-undefined, throw error
-    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
-      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
-      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
-    }
-
-    // Return true if arrays have changed, false if they are the same
-    return !arraysAreEqual(newVal, oldVal);
-  } catch (error) {
-    /* eslint-disable no-console */
-    console.error(error);
-    // If validation fails, it has changed
-    return true;
-  }
-}
-
 /**
  * Validates if an option can be interacted with.
  * @private
@@ -211,7 +156,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
   element.dispatchEvent(new CustomEvent(eventName, eventConfig));
 }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -219,14 +164,14 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
  * @attr {object} optionactive - Specifies the current active menuOption.
  * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
  * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -239,7 +184,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines */
+/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
 
 class AuroMenu extends LitElement {
   constructor() {
@@ -319,9 +264,8 @@ class AuroMenu extends LitElement {
         reflect: true
       },
       optionSelected: {
-        // Allow HTMLElement[] arrays and undefined
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
       },
       optionActive: {
         type: Object,
@@ -337,10 +281,8 @@ class AuroMenu extends LitElement {
         attribute: 'multiselect'
       },
       value: {
-        // Allow string[] arrays and undefined
-        type: Object,
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow string, string[] arrays and undefined
+        type: Object
       }
     };
   }
@@ -393,30 +335,39 @@ class AuroMenu extends LitElement {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('multiSelect')) {
+      // Reset selection if multiSelect mode changes
+      this.clearSelection();
+    }
+
     if (changedProperties.has('value')) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.optionSelected = undefined;
-        // Reset index tracking
         this.index = -1;
       } else {
-        // Convert single values to arrays
-        const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+        if (this.multiSelect) {
+          // In multiselect mode, this.value should be an array of strings
+          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
-        // Find all matching options
-        const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
+          this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
+        } else {
+          // In single-select mode, this.value should be a string
+          const matchingOptions = this.items.find((item) => item.value === this.value);
 
-        if (matchingOptions.length > 0) {
-          if (this.multiSelect) {
-            // For multiselect, keep all matching options
+          if (matchingOptions) {
             this.optionSelected = matchingOptions;
+            this.index = this.items.indexOf(matchingOptions);
           } else {
-            // For single select, only use the first match
-            this.optionSelected = [matchingOptions[0]];
-            this.index = this.items.indexOf(matchingOptions[0]);
+            // If no matching option found, reset selection
+            this.optionSelected = undefined;
+            this.index = -1;
           }
-        } else {
-          // No matches found - trigger failure event
+        }
+
+        // If no matching options were found in either mode
+        if (!this.optionSelected || (Array.isArray(this.optionSelected) && this.optionSelected.length === 0)) {
           dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
           this.optionSelected = undefined;
           this.index = -1;
@@ -568,8 +519,8 @@ class AuroMenu extends LitElement {
       }
     } else {
       // Single select - use arrays with single values
-      this.value = [option.value];
-      this.optionSelected = [option];
+      this.value = option.value;
+      this.optionSelected = option;
     }
 
     this.index = this.items.indexOf(option);
@@ -891,8 +842,13 @@ class AuroMenu extends LitElement {
     if (!this.optionSelected) {
       return false;
     }
-    // Always treat as array for both single and multi-select
-    return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
+
+    if (this.multiSelect) {
+      // In multi-select mode, check if the option is in the selected array
+      return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
+    }
+
+    return this.optionSelected === option;
   }
 
   /**
@@ -1423,4 +1379,4 @@ class AuroMenuOption extends LitElement {
   }
 }
 
-export { AuroMenu, AuroMenuOption, arrayConverter, arrayOrUndefinedHasChanged, dispatchMenuEvent, isOptionInteractive };
+export { AuroMenu, AuroMenuOption, arrayConverter, dispatchMenuEvent, isOptionInteractive };

package/components/menu/dist/registered.js

@@ -82,102 +82,6 @@ class AuroLibraryRuntimeUtils {
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
-// ---------------------------------------------------------------------
-
-/**
- * Converts value to an array.
- * If the value is a JSON string representing an array, it will be parsed.
- * If the value is already an array, it is returned.
- * If the value is undefined, it returns undefined.
- * @private
- * @param {any} value - The value to be converted. Can be a string, array, or undefined.
- * @returns {Array|undefined} - The converted array or undefined.
- * @throws {Error} - Throws an error if the value is not an array, undefined,
- * or if the value cannot be parsed into an array from a JSON string.
- */
-function arrayConverter(value) {
-  // Allow undefined
-  if (value === undefined) {
-    return undefined;
-  }
-
-  // Return the value if it is already an array
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  try {
-    // If value is a JSON string, parse it
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-
-    // Check if the parsed value is an array
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-  } catch (error) {
-    // If JSON parsing fails, continue to throw an error below
-    /* eslint-disable no-console */
-    console.error('JSON parsing failed:', error);
-  }
-
-  // Throw error if the input is not an array or undefined
-  throw new Error('Invalid value: Input must be an array or undefined');
-}
-
-/**
- * Compare two arrays for equality.
- * @private
- * @param {Array} arr1 - First array to compare.
- * @param {Array} arr2 - Second array to compare.
- * @returns {boolean} True if arrays are equal.
- */
-function arraysAreEqual(arr1, arr2) {
-  // If both arrays undefined, they are equal (true)
-  if (arr1 === undefined || arr2 === undefined) {
-    return arr1 === arr2;
-  }
-
-  // If arrays have different lengths, they are not equal
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-
-  // If every item at each index is the same, return true
-  for (let index = 0; index < arr1.length; index += 1) {
-    if (arr1[index] !== arr2[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Compares array for changes.
- * @private
- * @param {Array|any} newVal - New value to compare.
- * @param {Array|any} oldVal - Old value to compare.
- * @returns {boolean} True if arrays have changed.
- */
-function arrayOrUndefinedHasChanged(newVal, oldVal) {
-  try {
-    // Check if values are undefined or arrays
-    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
-
-    // If non-array or non-undefined, throw error
-    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
-      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
-      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
-    }
-
-    // Return true if arrays have changed, false if they are the same
-    return !arraysAreEqual(newVal, oldVal);
-  } catch (error) {
-    /* eslint-disable no-console */
-    console.error(error);
-    // If validation fails, it has changed
-    return true;
-  }
-}
 
 /**
  * Validates if an option can be interacted with.
@@ -211,7 +115,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
   element.dispatchEvent(new CustomEvent(eventName, eventConfig));
 }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -219,14 +123,14 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
  * @attr {object} optionactive - Specifies the current active menuOption.
  * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
  * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -239,7 +143,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines */
+/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
 
 class AuroMenu extends LitElement {
   constructor() {
@@ -319,9 +223,8 @@ class AuroMenu extends LitElement {
         reflect: true
       },
       optionSelected: {
-        // Allow HTMLElement[] arrays and undefined
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
       },
       optionActive: {
         type: Object,
@@ -337,10 +240,8 @@ class AuroMenu extends LitElement {
         attribute: 'multiselect'
       },
       value: {
-        // Allow string[] arrays and undefined
-        type: Object,
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow string, string[] arrays and undefined
+        type: Object
       }
     };
   }
@@ -393,30 +294,39 @@ class AuroMenu extends LitElement {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('multiSelect')) {
+      // Reset selection if multiSelect mode changes
+      this.clearSelection();
+    }
+
     if (changedProperties.has('value')) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.optionSelected = undefined;
-        // Reset index tracking
         this.index = -1;
       } else {
-        // Convert single values to arrays
-        const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+        if (this.multiSelect) {
+          // In multiselect mode, this.value should be an array of strings
+          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
-        // Find all matching options
-        const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
+          this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
+        } else {
+          // In single-select mode, this.value should be a string
+          const matchingOptions = this.items.find((item) => item.value === this.value);
 
-        if (matchingOptions.length > 0) {
-          if (this.multiSelect) {
-            // For multiselect, keep all matching options
+          if (matchingOptions) {
             this.optionSelected = matchingOptions;
+            this.index = this.items.indexOf(matchingOptions);
           } else {
-            // For single select, only use the first match
-            this.optionSelected = [matchingOptions[0]];
-            this.index = this.items.indexOf(matchingOptions[0]);
+            // If no matching option found, reset selection
+            this.optionSelected = undefined;
+            this.index = -1;
           }
-        } else {
-          // No matches found - trigger failure event
+        }
+
+        // If no matching options were found in either mode
+        if (!this.optionSelected || (Array.isArray(this.optionSelected) && this.optionSelected.length === 0)) {
           dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
           this.optionSelected = undefined;
           this.index = -1;
@@ -568,8 +478,8 @@ class AuroMenu extends LitElement {
       }
     } else {
       // Single select - use arrays with single values
-      this.value = [option.value];
-      this.optionSelected = [option];
+      this.value = option.value;
+      this.optionSelected = option;
     }
 
     this.index = this.items.indexOf(option);
@@ -891,8 +801,13 @@ class AuroMenu extends LitElement {
     if (!this.optionSelected) {
       return false;
     }
-    // Always treat as array for both single and multi-select
-    return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
+
+    if (this.multiSelect) {
+      // In multi-select mode, check if the option is in the selected array
+      return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
+    }
+
+    return this.optionSelected === option;
   }
 
   /**

package/components/radio/README.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/demo/api.md

@@ -80,6 +80,14 @@
 | [focusSelected](#focusSelected)      | `CustomEvent<any>` | Notifies that the component has gained focus.    |
 | [resetRadio](#resetRadio)         | `CustomEvent<any>` | Notifies that the component has reset the checked/selected state. |
 | [toggleSelected](#toggleSelected)     | `CustomEvent<any>` | Notifies that the component has toggled the checked/selected state. |
+
+## CSS Shadow Parts
+
+| Part          | Description                               |
+|---------------|-------------------------------------------|
+| [radio](#radio)       | apply css to a specific checkbox.         |
+| `radio-input` | apply css to a specific checkbox's input. |
+| `radio-label` | apply css to a specific checkbox's label. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples

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

@@ -70,7 +70,7 @@ 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`: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:var(--ds-size-200, 1rem);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-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)}`;
 
@@ -165,6 +165,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
  * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
+ *
+ * @csspart radio - apply css to a specific checkbox.
+ * @csspart radio-input - apply css to a specific checkbox's input.
+ * @csspart radio-label - apply css to a specific checkbox's label.
  */
 
 // build the component class
@@ -395,9 +399,10 @@ class AuroRadio extends i$2 {
     };
 
     return x`
-      <div class="ods-inputGroup rdoGroup">
+      <div class="ods-inputGroup rdoGroup" part="radio">
         <input
           class="util_displayHiddenVisually ods-inputOption rdo--input"
+          part="radio-input"
           @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
@@ -409,13 +414,16 @@ class AuroRadio extends i$2 {
           name="${o$1(this.name)}"
           type="radio"
           .value="${this.value}"
-          tabIndex="-1"
+          tabindex="-1"
         />
 
-        <label for="${this.inputId}" class="${e(labelClasses)}">
+        <label
+          for="${this.inputId}"
+          class="${e(labelClasses)}"
+          part="radio-label"
+        >
           <slot>${this.label}</slot>
         </label>
-
       </div>
       <slot name="content" class="slotContent"></slot>
     `;

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

@@ -45,7 +45,7 @@ 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`: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:var(--ds-size-200, 1rem);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-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)}`;
 
@@ -140,6 +140,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
  * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
+ *
+ * @csspart radio - apply css to a specific checkbox.
+ * @csspart radio-input - apply css to a specific checkbox's input.
+ * @csspart radio-label - apply css to a specific checkbox's label.
  */
 
 // build the component class
@@ -370,9 +374,10 @@ class AuroRadio extends i$2 {
     };
 
     return x`
-      <div class="ods-inputGroup rdoGroup">
+      <div class="ods-inputGroup rdoGroup" part="radio">
         <input
           class="util_displayHiddenVisually ods-inputOption rdo--input"
+          part="radio-input"
           @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
@@ -384,13 +389,16 @@ class AuroRadio extends i$2 {
           name="${o$1(this.name)}"
           type="radio"
           .value="${this.value}"
-          tabIndex="-1"
+          tabindex="-1"
         />
 
-        <label for="${this.inputId}" class="${e(labelClasses)}">
+        <label
+          for="${this.inputId}"
+          class="${e(labelClasses)}"
+          part="radio-label"
+        >
           <slot>${this.label}</slot>
         </label>
-
       </div>
       <slot name="content" class="slotContent"></slot>
     `;

package/components/radio/demo/readme.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/dist/auro-radio.d.ts

@@ -13,6 +13,10 @@
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
  * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
+ *
+ * @csspart radio - apply css to a specific checkbox.
+ * @csspart radio-input - apply css to a specific checkbox's input.
+ * @csspart radio-label - apply css to a specific checkbox's label.
  */
 export class AuroRadio extends LitElement {
     static get styles(): import("lit").CSSResult[];