@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

package/components/radio/dist/registered.js

@@ -0,0 +1,2117 @@
+import { css, LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
+
+!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 = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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);padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-75, 0.375rem)}.rdoGroup:has(:enabled) .label:hover{cursor:pointer}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:after{position:absolute;z-index:1;top:var(--ds-size-50, 0.25rem);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));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 = css`.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]),:host([appearance=inverse]){--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]),:host([appearance=inverse][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]),:host([appearance=inverse][error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][checked][error]),:host([appearance=inverse][checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][disabled]),:host([appearance=inverse][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]),:host([appearance=inverse][checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark].focus-visible),:host([appearance=inverse].focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
+
+var tokenCss = css`: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.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+
+  /**
+   * Gets the text content of a named slot.
+   * @returns {String}
+   * @private
+   */
+  getSlotText(elem, name) {
+    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
+
+    return text || null;
+  }
+};
+
+/* eslint-disable max-lines, no-underscore-dangle */
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * The `auro-radio` element is used to a button that allows the user to select one option from a set.
+ * @customElement auro-radio
+ *
+ * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @event focusSelected - Notifies that the component has gained focus.
+ * @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.
+ */
+class AuroRadio extends LitElement {
+  constructor() {
+    super();
+
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
+    this.appearance = "default";
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.onDark = false;
+    this.touched = false;
+    this.role = 'radio';
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+  }
+
+  static get styles() {
+    return [
+      styleCss$2,
+      colorCss$2,
+      tokenCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @type {'default' | 'inverse'}
+       * @default 'default'
+       */
+      appearance: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * If set to true, the radio button will be filled.
+       */
+      checked: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If set to true, the radio button will be non-clickable.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If set to true, sets an error state on the radio button.
+       */
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * The id global attribute defines an identifier (ID) which must be unique in the whole document.
+       */
+      id: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * ID for input node.
+       * @private
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * Label for the radio button.
+       */
+      label:    { type: String },
+
+      /**
+       * Name for the radio button group.
+       */
+      name:     { type: String },
+
+      /**
+       * DEPRECATED - use `appearance="inverse"` instead.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Defines element as required.
+       */
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Don't add to api.md since changing of this can easily break a11y.
+       * @private
+       */
+      role: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      },
+
+      /**
+       * The value of the radio button.
+       */
+      value:    { type: String }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-radio"] - The name of the element that you want to register.
+   *
+   * @example
+   * AuroRadio.register("custom-radio") // This will resgiter this element to <custom-radio/>
+   *
+   */
+  static register(name = "auro-radio") {
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroRadio);
+  }
+
+  /**
+   * Method for handling content when change event is fired.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleChange(event) {
+    this.checked = event.target.checked;
+    const customEvent = new CustomEvent(event.type, event);
+    this.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Method for handling content when input event is fired.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleInput(event) {
+    this.checked = event.target.checked;
+    this.dispatchEvent(new CustomEvent('toggleSelected', {
+      bubbles: true,
+      composed: true,
+      target: this
+    }));
+  }
+
+  /**
+   * Method for handling focus event.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleFocus(event) {
+    this.touched = true;
+    this.dispatchEvent(new CustomEvent('focusSelected', {
+      bubbles: true,
+      composed: true,
+      target: event.target
+    }));
+  }
+
+  /**
+   * Method for handling blur event.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleBlur(event) {
+    this.dispatchEvent(new CustomEvent('auroRadio-blur', {
+      bubbles: true,
+      composed: true,
+      target: event.target
+    }));
+  }
+
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.touched = false;
+    this.checked = false;
+    this.error = false;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('required')) {
+      this.setAttribute('aria-required', this.isRequired(this.required));
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', '');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+      // eslint-disable-next-line no-magic-numbers
+      this.setAttribute('tabindex', this.checked ? 0 : -1);
+
+      this.dispatchEvent(new CustomEvent('resetRadio', {
+        bubbles: true,
+        composed: true
+      }));
+
+      if (this.checked) {
+        this.dispatchEvent(new CustomEvent('auroRadio-selected', {
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+  }
+
+  /**
+   * Method for handling passing the required status to aria.
+   * @private
+   * @param {Boolean} required - The element's required attribute.
+   * @returns {void}
+   */
+  isRequired(required) {
+    if (required) {
+      return 'true';
+    }
+
+    return 'false';
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
+
+    this.addEventListener('focus', this.handleFocus);
+    this.addEventListener('blur', this.handleBlur);
+
+    this.input = this.shadowRoot.querySelector('input');
+
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
+    this.addEventListener('click', () => {
+      this.input.click();
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const labelClasses = {
+      'ods-inputLabel': true,
+      'ods-inputLabel--radio': true,
+      'label': true,
+      'label--rdo': true,
+      'errorBorder': this.error
+    };
+
+    return html`
+      <div class="ods-inputGroup rdoGroup body-default" part="radio">
+        <input
+          class="util_displayHidden ods-inputOption rdo--input"
+          part="radio-input"
+          @input="${this.handleInput}"
+          @change="${this.handleChange}"
+          ?disabled="${this.disabled}"
+          .checked="${this.checked}"
+          id="${this.inputId}"
+          name="${ifDefined(this.name)}"
+          type="radio"
+          .value="${this.value}"
+          aria-hidden="true"
+          tabindex="-1"
+        />
+
+        <label for="${this.inputId}" class="${classMap(labelClasses)}" part="radio-label">
+          <slot>${this.label}</slot>
+        </label>
+      </div>
+      <slot name="content" class="slotContent"></slot>
+    `;
+  }
+}
+
+var styleCss$1 = css`: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)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
+
+var colorCss$1 = css`: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]),:host([appearance=inverse]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
+
+class DateFormatter {
+
+  constructor() {
+
+    /**
+     * @description Parses a date string into its components.
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {Object<key["month" | "day" | "year"]: number>|undefined}
+     */
+    this.parseDate = (dateStr, format = 'mm/dd/yyyy') => {
+
+      // Guard Clause: Date string is defined
+      if (!dateStr) {
+        return undefined;
+      }
+
+      // Assume the separator is a "/" a defined in our code base
+      const separator = '/';
+
+      // Get the parts of the date and format
+      const valueParts = dateStr.split(separator);
+      const formatParts = format.split(separator);
+
+      // Check if the value and format have the correct number of parts
+      if (valueParts.length !== formatParts.length) {
+        throw new Error('AuroDatepickerUtilities | parseDate: Date string and format length do not match');
+      }
+
+      // Holds the result to be returned
+      const result = formatParts.reduce((acc, part, index) => {
+        const value = valueParts[index];
+
+        if ((/m/iu).test(part)) {
+          acc.month = value;
+        } else if ((/d/iu).test(part)) {
+          acc.day = value;
+        } else if ((/y/iu).test(part)) {
+          acc.year = value;
+        }
+
+        return acc;
+      }, {});
+
+      // If we found all the parts, return the result
+      if (result.month && result.year) {
+        return result;
+      }
+
+      // Throw an error to let the dev know we were unable to parse the date string
+      throw new Error('AuroDatepickerUtilities | parseDate: Unable to parse date string');
+    };
+
+    /**
+     * Convert a date object to string format.
+     * @param {Object} date - Date to convert to string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
+     */
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    });
+
+    /**
+     * Converts a date string to a North American date format.
+     * @param {String} dateStr - Date to validate.
+     * @param {String} format - Date format to validate against.
+     * @returns {Boolean}
+     */
+    this.toNorthAmericanFormat = (dateStr, format) => {
+
+      if (format === 'mm/dd/yyyy') {
+        return dateStr;
+      }
+
+      const parsedDate = this.parseDate(dateStr, format);
+
+      if (!parsedDate) {
+        throw new Error('AuroDatepickerUtilities | toNorthAmericanFormat: Unable to parse date string');
+      }
+
+      const { month, day, year } = parsedDate;
+
+      const dateParts = [];
+      if (month) {
+        dateParts.push(month);
+      }
+
+      if (day) {
+        dateParts.push(day);
+      }
+
+      if (year) {
+        dateParts.push(year);
+      }
+
+      return dateParts.join('/');
+    };
+  }
+}
+const dateFormatter = new DateFormatter();
+
+// filepath: dateConstraints.mjs
+const DATE_UTIL_CONSTRAINTS = {
+  maxDay: 31,
+  maxMonth: 12,
+  maxYear: 2400,
+  minDay: 1,
+  minMonth: 1,
+  minYear: 1900,
+};
+
+class AuroDateUtilitiesBase {
+
+  /**
+   * @description The maximum day value allowed by the various utilities in this class.
+   * @readonly
+   * @type {Number}
+   */
+  get maxDay() {
+    return DATE_UTIL_CONSTRAINTS.maxDay;
+  }
+
+  /**
+   * @description The maximum month value allowed by the various utilities in this class.
+   * @readonly
+   * @type {Number}
+   */
+  get maxMonth() {
+    return DATE_UTIL_CONSTRAINTS.maxMonth;
+  }
+
+  /**
+   * @description The maximum year value allowed by the various utilities in this class.
+   * @readonly
+   * @type {Number}
+   */
+  get maxYear() {
+    return DATE_UTIL_CONSTRAINTS.maxYear;
+  }
+
+  /**
+   * @description The minimum day value allowed by the various utilities in this class.
+   * @readonly
+   * @type {Number}
+   */
+  get minDay() {
+    return DATE_UTIL_CONSTRAINTS.minDay;
+  }
+
+  /**
+   * @description The minimum month value allowed by the various utilities in this class.
+   * @readonly
+   * @type {Number}
+   */
+  get minMonth() {
+    return DATE_UTIL_CONSTRAINTS.minMonth;
+  }
+
+  /**
+   * @description The minimum year value allowed by the various utilities in this class.
+   * @readonly
+   * @type {Number}
+   */
+  get minYear() {
+    return DATE_UTIL_CONSTRAINTS.minYear;
+  }
+}
+
+/* eslint-disable no-magic-numbers */
+
+class AuroDateUtilities extends AuroDateUtilitiesBase {
+
+  /**
+   * Returns the current century.
+   * @returns {String} The current century.
+   */
+  getCentury () {
+    return String(new Date().getFullYear()).slice(0, 2);
+  }
+
+  /**
+   * Returns a four digit year.
+   * @param {String} year - The year to convert to four digits.
+   * @returns {String} The four digit year.
+   */
+  getFourDigitYear (year) {
+
+    const strYear = String(year).trim();
+    return strYear.length <= 2 ? this.getCentury() + strYear : strYear;
+  }
+
+  constructor() {
+
+    super();
+
+    /**
+     * Compares two dates to see if they match.
+     * @param {Object} date1 - First date to compare.
+     * @param {Object} date2 - Second date to compare.
+     * @returns {Boolean} Returns true if the dates match.
+     */
+    this.datesMatch = (date1, date2) => new Date(date1).getTime() === new Date(date2).getTime();
+
+    /**
+     * Returns true if value passed in is a valid date.
+     * @param {String} date - Date to validate.
+     * @param {String} format - Date format to validate against.
+     * @returns {Boolean}
+     */
+    this.validDateStr = (date, format) => {
+
+      // The length we expect the date string to be
+      const dateStrLength = format.length;
+
+      // Guard Clause: Date and format are defined
+      if (typeof date === "undefined" || typeof format === "undefined") {
+        throw new Error('AuroDatepickerUtilities | validateDateStr: Date and format are required');
+      }
+
+      // Guard Clause: Date should be of type string
+      if (typeof date !== "string") {
+        throw new Error('AuroDatepickerUtilities | validateDateStr: Date must be a string');
+      }
+
+      // Guard Clause: Format should be of type string
+      if (typeof format !== "string") {
+        throw new Error('AuroDatepickerUtilities | validateDateStr: Format must be a string');
+      }
+
+      // Guard Clause: Length is what we expect it to be
+      if (date.length !== dateStrLength) {
+        return false;
+      }
+      // Get a formatted date string and parse it
+      const dateParts = dateFormatter.parseDate(date, format);
+
+      // Guard Clause: Date parse succeeded
+      if (!dateParts) {
+        return false;
+      }
+
+      // Create the expected date string based on the date parts
+      const expectedDateStr = `${dateParts.month}/${dateParts.day || "01"}/${this.getFourDigitYear(dateParts.year)}`;
+
+      // Generate a date object that we will extract a string date from to compare to the passed in date string
+      const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
+
+      // Get the date string of the date object we created from the string date
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
+
+      // Guard Clause: Generated date matches date string input
+      if (expectedDateStr !== actualDateStr) {
+        return false;
+      }
+
+      // If we passed all other checks, we can assume the date is valid
+      return true;
+    };
+
+    /**
+     * Determines if a string date value matches the format provided.
+     * @param {string} value = The date string value.
+     * @param { string} format = The date format to match against.
+     * @returns {boolean}
+     */
+    this.dateAndFormatMatch = (value, format) => {
+
+      // Ensure we have both values we need to do the comparison
+      if (!value || !format) {
+        throw new Error('AuroFormValidation | dateFormatMatch: value and format are required');
+      }
+
+      // If the lengths are different, they cannot match
+      if (value.length !== format.length) {
+        return false;
+      }
+
+      // Get the parts of the date
+      const dateParts = dateFormatter.parseDate(value, format);
+
+      // Validator for day
+      const dayValueIsValid = (day) => {
+
+        // Guard clause: if there is no day in the dateParts, we can ignore this check.
+        if (!dateParts.day) {
+          return true;
+        }
+
+        // Guard clause: ensure day exists.
+        if (!day) {
+          return false;
+        }
+
+        // Convert day to number
+        const numDay = Number.parseInt(day, 10);
+
+        // Guard clause: ensure day is a valid integer
+        if (Number.isNaN(numDay)) {
+          throw new Error('AuroDatepickerUtilities | dayValueIsValid: Unable to parse day value integer');
+        }
+
+        // Guard clause: ensure day is within the valid range
+        if (numDay < this.minDay || numDay > this.maxDay) {
+          return false;
+        }
+
+        // Default return
+        return true;
+      };
+
+      // Validator for month
+      const monthValueIsValid = (month) => {
+
+        // Guard clause: ensure month exists.
+        if (!month) {
+          return false;
+        }
+
+        // Convert month to number
+        const numMonth = Number.parseInt(month, 10);
+
+        // Guard clause: ensure month is a valid integer
+        if (Number.isNaN(numMonth)) {
+          throw new Error('AuroDatepickerUtilities | monthValueIsValid: Unable to parse month value integer');
+        }
+
+        // Guard clause: ensure month is within the valid range
+        if (numMonth < this.minMonth || numMonth > this.maxMonth) {
+          return false;
+        }
+
+        // Default return
+        return true;
+      };
+
+      // Validator for year
+      const yearIsValid = (_year) => {
+
+        // Guard clause: ensure year exists.
+        if (!_year) {
+          return false;
+        }
+
+        // Get the full year
+        const year = this.getFourDigitYear(_year);
+
+        // Convert year to number
+        const numYear = Number.parseInt(year, 10);
+
+        // Guard clause: ensure year is a valid integer
+        if (Number.isNaN(numYear)) {
+          throw new Error('AuroDatepickerUtilities | yearValueIsValid: Unable to parse year value integer');
+        }
+
+        // Guard clause: ensure year is within the valid range
+        if (numYear < this.minYear || numYear > this.maxYear) {
+          return false;
+        }
+
+        // Default return
+        return true;
+      };
+
+      // Self-contained checks for month, day, and year
+      const checks = [
+        monthValueIsValid(dateParts.month),
+        dayValueIsValid(dateParts.day),
+        yearIsValid(dateParts.year)
+      ];
+
+      // If any of the checks failed, the date format does not match and the result is invalid
+      const isValid = checks.every((check) => check === true);
+
+      //  If the check is invalid, return false
+      if (!isValid) {
+        return false;
+      }
+
+      // Default case
+      return true;
+    };
+  }
+}
+
+// Export a class instance
+const dateUtilities = new AuroDateUtilities();
+
+// Export the class instance methods individually
+const {
+  datesMatch,
+  validDateStr,
+  dateAndFormatMatch,
+  minDay,
+  minMonth,
+  minYear,
+  maxDay,
+  maxMonth,
+  maxYear
+} = dateUtilities;
+
+const {
+  toNorthAmericanFormat,
+  parseDate,
+  getDateAsString
+} = dateFormatter;
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroFormValidation {
+
+  constructor() {
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+  }
+
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+    elem.touched = false;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
+  /**
+   * Validates the attributes of a given element based on predefined validation rules.
+   *
+   * @param {HTMLElement} elem - The element to be validated.
+   * @returns {void}
+   *
+   * @example
+   * // Assuming `inputElement` is a reference to an input element in the DOM
+   * validateElementAttributes(inputElement);
+   *
+   * The function checks the element's attributes against the validation rules defined for 'input' and 'counter' types.
+   * If a validation rule is violated, it sets the element's validity state and error message accordingly.
+   *
+   * Validation rules:
+   * - input:
+   *   - length:
+   *     - tooShort: Checks if the value length is less than the minimum length.
+   *     - tooLong: Checks if the value length exceeds the maximum length.
+   *   - pattern:
+   *     - patternMismatch: Checks if the value does not match the specified pattern.
+   * - counter:
+   *   - range:
+   *     - rangeOverflow: Checks if the value exceeds the maximum value.
+   *     - rangeUnderflow: Checks if the value is less than the minimum value.
+   */
+  validateElementAttributes(elem) {
+    const validationRules = {
+      input: {
+        length: [
+          {
+            check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
+            validity: 'tooShort',
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
+          },
+          {
+            check: (e) => e.value?.length > e.maxLength,
+            validity: 'tooLong',
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
+          }
+        ],
+        pattern: [
+          {
+            check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
+            validity: 'patternMismatch',
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
+          }
+        ]
+      },
+      counter: {
+        range: [
+          {
+            check: (e) => e.max !== undefined && Number(e.max) < Number(e.value),
+            validity: 'rangeOverflow',
+            message: e => e.getAttribute('setCustomValidityRangeOverflow') || ''
+          },
+          {
+            check: (e) => e.min !== undefined && Number(e.min) > Number(e.value),
+            validity: 'rangeUnderflow',
+            message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
+          }
+        ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
+      }
+    };
+
+    let elementType;
+    if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      elementType = 'input';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
+    }
+
+    if (elementType) {
+      const rules = validationRules[elementType];
+
+      if (rules) {
+        Object.values(rules).flat().forEach(rule => {
+          if (rule.check(elem)) {
+            elem.validity = rule.validity;
+            elem.errorMessage = rule.message(elem);
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * Determines the validity state of the element based on the type attribute.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  validateType(elem) {
+    if (elem.hasAttribute('type')) {
+      if (elem.type === 'email') {
+        const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
+
+        if (!elem.value.match(emailRegex)) {
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
+          return;
+        }
+      } else if (elem.type === 'credit-card') {
+        if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
+          elem.validity = 'tooShort';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
+          return;
+        }
+      } else if (elem.type === 'number') {
+        if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
+          elem.validity = 'rangeOverflow';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
+          return;
+        }
+
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
+          elem.validity = 'rangeUnderflow';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
+          return;
+        }
+      } else if (elem.type === 'date' && elem.value?.length > 0) {
+
+        // Guard Clause: if the value is too short
+        if (elem.value?.length < elem.lengthForType) {
+          
+          elem.validity = 'tooShort';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
+          return;
+        } 
+        
+        // Guard Clause: If the value is too long for the type
+        if (elem.value?.length > elem.lengthForType) {
+
+          elem.validity = 'tooLong';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
+          return;
+        }
+        
+        // Validate that the date passed was the correct format
+        if (!dateAndFormatMatch(elem.value, elem.format)) {
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || 'Invalid Date Format Entered';
+          return;
+        }
+        
+        // Validate that the date passed was a valid date
+        if (!validDateStr(elem.value, elem.format)) {
+          elem.validity = 'invalidDate';
+          elem.errorMessage = elem.setCustomValidityInvalidDate || elem.setCustomValidity || 'Invalid Date Entered';
+          return;
+        }
+
+        // Perform the rest of the validation
+        const formattedValue = toNorthAmericanFormat(elem.value, elem.format);
+        const valueDate = new Date(formattedValue);
+
+        // // Validate max date
+        if (elem.max?.length === elem.lengthForType) {
+
+          const maxDate = new Date(toNorthAmericanFormat(elem.max, elem.format));
+
+          if (valueDate > maxDate) {
+            elem.validity = 'rangeOverflow';
+            elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
+            return;
+          }
+        }
+
+        // Validate min date
+        if (elem.min?.length === elem.lengthForType) {
+          const minDate = new Date(toNorthAmericanFormat(elem.min, elem.format));
+
+          if (valueDate < minDate) {
+            elem.validity = 'rangeUnderflow';
+            elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
+            return;
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Determines the validity state of the element.
+   * @param {object} elem - HTML element to validate.
+   * @param {boolean} force - Boolean that forces validation to run.
+   * @returns {void}
+   */
+  validate(elem, force) {
+    this.getInputElements(elem);
+    this.getAuroInputs(elem);
+
+    // Check if validation should run
+    let validationShouldRun =
+
+      // If the validation was forced
+      force ||
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
+
+    if (elem.hasAttribute('error')) {
+      elem.validity = 'customError';
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
+    } else if (validationShouldRun) {
+      elem.validity = 'valid';
+      elem.errorMessage = '';
+
+      /**
+       * Only validate once we interact with the datepicker
+       * elem.value === undefined is the initial state pre-interaction.
+       *
+       * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
+       */
+
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+      
+      if (typeof elem.value === "boolean") {
+        hasValue = elem.value || elem.value === false;
+      }
+
+      if (typeof elem.value === "number") {
+        hasValue = !isNaN(elem.value) && elem.value !== null;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
+      if (this.auroInputElements?.length === 2) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+          hasValue = false;
+        }
+      }
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
+      if (!hasValue && elem.required && (force || elem.touched)) {
+        elem.validity = 'valueMissing';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+        this.validateType(elem);
+        this.validateElementAttributes(elem);
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
+        this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
+      }
+    }
+
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing" && elem.validity !== "customError") {
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate(force));
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
+
+      // multiple input in one components (datepicker)
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
+      }
+    }
+
+    if (validationShouldRun || elem.hasAttribute('error')) {
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
+      }
+
+      this.getErrorMessage(elem);
+    }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
+  }
+
+  /**
+   * Gets all the HTML5 `inputs` in the element shadow DOM.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  getInputElements(elem) {
+    this.inputElements = elem.renderRoot.querySelectorAll('input');
+  }
+
+  /**
+   * Gets all the `auro-inputs` in the element shadow DOM.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  getAuroInputs(elem) {
+    this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]');
+  }
+
+  /**
+   * Return appropriate error message.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  getErrorMessage(elem) {
+    if (elem.validity !== 'valid') {
+      if (elem.setCustomValidity) {
+        elem.errorMessage = elem.setCustomValidity;
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
+        const input = elem.renderRoot.querySelector('input');
+
+        if (input.validationMessage.length > 0) {
+          elem.errorMessage = input.validationMessage;
+        }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
+      } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
+        const firstInput = this.inputElements[0];
+
+        if (firstInput.validationMessage.length > 0) {
+          elem.errorMessage = firstInput.validationMessage;
+        } else if (this.inputElements?.length === 2) {
+          const secondInput = this.inputElements[1];
+
+          if (secondInput.validationMessage.length > 0) {
+            elem.errorMessage = secondInput.validationMessage;
+          }
+        }
+      }
+    } else {
+      elem.errorMessage = '';
+    }
+  }
+}
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroDependencyVersioning {
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @private
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
+
+    return result;
+  }
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = literal`${unsafeStatic(elementName)}`;
+
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
+    }
+
+    return tag;
+  }
+}
+
+var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]),:host([appearance=inverse]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]),:host([appearance=inverse][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+
+var styleCss = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{position:relative;display:block}.helptext-wrapper{display:none}.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 = css`: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.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+
+  /**
+   * Gets the text content of a named slot.
+   * @returns {String}
+   * @private
+   */
+  getSlotText(elem, name) {
+    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
+
+    return text || null;
+  }
+}
+
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * Displays help text or error messages within form elements - Internal Use Only.
+ */
+class AuroHelpText extends LitElement {
+
+  constructor() {
+    super();
+
+    this.error = false;
+    this.appearance = "default";
+    this.onDark = false;
+    this.hasTextContent = false;
+
+    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
+  }
+
+  static get styles() {
+    return [
+      colorCss,
+      styleCss,
+      tokensCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @default 'default'
+       */
+      appearance: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      slotNodes: {
+        type: Boolean,
+      },
+
+      /**
+       * @private
+       */
+      hasTextContent: {
+        type: Boolean,
+      },
+
+      /**
+       * If declared, make font color red.
+       */
+      error: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * DEPRECATED - use `appearance` instead.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-helptext"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
+   *
+   */
+  static register(name = "auro-helptext") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
+  }
+
+  updated() {
+    this.handleSlotChange();
+  }
+
+  handleSlotChange(event) {
+    if (event) {
+      this.slotNodes = event.target.assignedNodes();
+    }
+
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
+
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
+    }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+var formkitVersion = '202604071818';
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+// ---------------------------------------------------------------------
+
+
+/* eslint no-magic-numbers: ["error", { "ignore": [0, 1, -1] }] */
+/* eslint-disable max-lines, lit/binding-positions, lit/no-invalid-html, no-underscore-dangle */
+
+/**
+ * The `auro-radio-group` element is used to group a set `auro-radio` elements.
+ * @customElement auro-radio-group
+ *
+ * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
+ * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
+ * @event auroFormElement-validated - Notifies that the element has been validated.
+ * @event input - Notifies every time the value prop of the element is changed.
+ */
+
+class AuroRadioGroup extends LitElement {
+  constructor() {
+    super();
+
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
+    this.appearance = "default";
+    this.disabled = false;
+    this.horizontal = false;
+    this.required = false;
+    this.validity = undefined;
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.onDark = false;
+    this.touched = false;
+    this.hasLegend = false;
+
+    /**
+     * @private
+     */
+    this.validation = new AuroFormValidation();
+
+    /**
+     * @private
+     */
+    this.index = 0;
+
+    /**
+     * @private
+     */
+    this.max = 3;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.helpTextTag = versioning.generateTag('auro-formkit-radio-helptext', formkitVersion, AuroHelpText);
+  }
+
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokenCss
+    ];
+  }
+
+  static get properties() {
+    return {
+
+      /**
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @type {'default' | 'inverse'}
+       * @default 'default'
+       */
+      appearance: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * If true, all radio buttons will be disabled.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+       */
+      error: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Indicates whether the legend slot is set or not.
+       * @private
+       */
+      hasLegend: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * If true, displays radio buttons horizontally.
+       */
+      horizontal: { type: Boolean },
+
+      /**
+       * If true, disables auto-validation on blur.
+       */
+      noValidate: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * DEPRECATED - use `appearance="inverse"` instead.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Specifies the current selected radio button.
+       */
+      optionSelected: {
+        type: Object
+      },
+
+      /**
+       * Populates the `required` attribute on the element. Used for client-side validation.
+       */
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Sets a custom help text message to display for all validityStates.
+       */
+      setCustomValidity: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `customError`.
+       */
+      setCustomValidityCustomError: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `valueMissing`.
+       */
+      setCustomValidityValueMissing: {
+        type: String
+      },
+
+      /**
+       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      },
+
+      /**
+       * Specifies the `validityState` this element is in.
+       */
+      validity: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Specifies the current value of the selected radio button.
+       */
+      value: {
+        type: String
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-radio-group"] - The name of the element that you want to register.
+   *
+   * @example
+   * AuroRadioGroup.register("custom-radio-group") // This will register this element to <custom-radio-group/>
+   *
+   */
+  static register(name = "auro-radio-group") {
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroRadioGroup);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleItems();
+    this.addEventListener('toggleSelected', this.handleToggleSelected);
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('resetRadio', this.resetRadio);
+    this.addEventListener('auroRadio-blur', this.handleRadioBlur);
+    this.addEventListener('auroRadio-selected', this.handleSelection);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-radio-group');
+  }
+
+  /**
+   * Method for handling of selection of a radio element.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleSelection(event) {
+    // specifically check null and undefined in case if the value is false or 0
+    if (event.target.value !== null && event.target.value !== undefined) {
+      this.value = event.target.value;
+    } else {
+      this.value = '';
+    }
+
+    this.optionSelected = event.target;
+
+    this.validation.validate(this, this.optionSelected !== undefined);
+  }
+
+  /**
+   * Method handles radio element blur.
+   * @private
+   * @returns {void}
+   */
+  handleRadioBlur() {
+    this.touched = true;
+    this.validation.validate(this);
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('disabled')) {
+      // only change the children if we are making everything disabled, or if we are making everything enabled and there are no individually-disabled radio buttons
+      if (this.disabled || this.items.every((el) => el.disabled)) {
+        this.items.forEach((el) => {
+          el.disabled = this.disabled;
+        });
+      }
+    }
+
+    if (changedProperties.has('value')) {
+      this.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }));
+    }
+
+    if (changedProperties.has('required')) {
+      this.items.forEach((el) => {
+        el.required = this.required;
+      });
+    }
+
+    if (changedProperties.has('onDark')) {
+      this.items.forEach((el) => {
+        el.onDark = this.onDark;
+      });
+    }
+
+    if (changedProperties.has('appearance')) {
+      this.items.forEach((el) => {
+        el.appearance = this.appearance;
+      });
+    }
+
+    if (changedProperties.has('error')) {
+      this.validate(true);
+    }
+
+    if (changedProperties.has('validity')) {
+      if (this.validity && this.validity !== 'valid') {
+        this.setAttribute('aria-invalid', 'true');
+
+        this.items.forEach((el) => {
+          el.setAttribute('error', true);
+        });
+      } else {
+        this.removeAttribute('aria-invalid');
+
+        this.items.forEach((el) => {
+          el.removeAttribute('error');
+        });
+      }
+    }
+  }
+
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    // Sets first radio button to receive focus during keyboard navigation
+    this.index = 0;
+
+    const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
+
+    buttons.forEach((button) => {
+      button.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
+  /**
+   * Method handles the reset event from a radio element.
+   * @private
+   * @returns {void}
+   */
+  resetRadio() {
+    if (this.items.length === 0) {
+      this.handleItems();
+    }
+  }
+
+  /**
+   * Method for handling the attributes of each radio input.
+   * @private
+   * @returns {void}
+   */
+  handleItems() {
+    this.items = [...this.querySelectorAll(':scope auro-radio, :scope [auro-radio]')];
+    this.initializeIndex();
+
+    if (this.disabled) {
+      this.items.forEach((el) => {
+        el.disabled = this.disabled;
+      });
+    }
+
+    this.items.forEach((el) => {
+      el.required = this.required;
+      el.error = Boolean(this.error);
+    });
+  }
+
+  /**
+   * Method for handling slot content changes.
+   * @private
+   * @returns {void}
+   */
+  handleSlotChange() {
+    this.handleItems();
+  }
+
+  /**
+   * Method for handling legend slot changes.
+   * @private
+   * @returns {void}
+   */
+  handleLegendSlotChange() {
+    const slot = this.shadowRoot.querySelector('slot[name="legend"]');
+    if (slot) {
+      this.hasLegend = slot.assignedNodes().length > 0;
+    }
+  }
+
+  /**
+   * Method for initializing the tab index of the checked radio input.
+   * @private
+   * @returns {void}
+   */
+  initializeIndex() {
+    if (!this.disabled && this.items && this.items.length > 0) {
+      const index = this.items.findIndex((item) => item.hasAttribute('checked') && !item.hasAttribute('disabled'));
+      const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
+
+      this.index = index >= 0 ? index : nextEnabledIndex;
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
+  }
+
+  /**
+   * Method for handling a newly selected radio input.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleToggleSelected(event) {
+    this.index = this.items.indexOf(event.target);
+
+    this.items.forEach((item) => {
+      item.checked = item === event.target;
+    });
+
+    this.value = event.target.value;
+    this.optionSelected = event.target;
+
+    this.validation.validate(this);
+  }
+
+  /**
+   * Method for selecting a radio input.
+   * @private
+   * @param {Number} index - The value of the element's index attribute.
+   * @returns {void}
+   */
+  selectItem(index) {
+    const sdItem = this.items[index];
+
+    sdItem.click();
+    sdItem.focus();
+    this.index = index;
+  }
+
+  /**
+   * Method for selecting the next radio input.
+   * @private
+   * @param {Number} index - The value of the element's index attribute.
+   * @param {String} moveDirection - Arrow key pressed by user.
+   * @returns {void}
+   */
+  selectNextItem(index, moveDirection) {
+    let currIndex = index;
+
+    for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
+      currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
+      const sdItem = this.items[currIndex];
+      if (sdItem) {
+        if (this.disabled || this.items.every((item) => item.disabled === true)) {
+          sdItem.focus();
+          break;
+        }
+        if (!sdItem.disabled) {
+          sdItem.click();
+          sdItem.focus();
+          this.index = currIndex;
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * Method for handling a keydown event.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleKeyDown(event) {
+    switch (event.key) {
+      case " ":
+        event.preventDefault();
+        this.selectItem(this.index);
+        break;
+
+      case "Down":
+      case "ArrowDown":
+      case "Right":
+      case "ArrowRight":
+        event.preventDefault();
+        this.selectNextItem(this.index === this.items.length - 1 ? 0 : this.index + 1, "Down");
+        break;
+
+      case "Up":
+      case "ArrowUp":
+      case "Left":
+      case "ArrowLeft":
+        event.preventDefault();
+        this.selectNextItem(this.index === 0 ? this.items.length - 1 : this.index - 1, "Up");
+        break;
+    }
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const groupClasses = {
+      'displayFlex': this.horizontal && this.items.length <= this.max
+    };
+    const legendClasses = {
+      'hidden': !this.hasLegend && this.required
+    };
+
+    return html$1`
+      <fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
+        <legend class="${classMap(legendClasses)}">
+          <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
+          ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html$1`
+          <${this.helpTextTag} appearance="${this.onDark ? 'inverse' : this.appearance}" part="helpText">
+            <slot name="helpText"></slot>
+          </${this.helpTextTag}>`
+        : html$1`
+          <${this.helpTextTag} appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" error aria-live="assertive" part="helpText">
+            ${this.errorMessage}
+          </${this.helpTextTag}>`
+      }
+    `;
+  }
+}
+
+AuroRadio.register();
+AuroRadioGroup.register();