@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.0

package/components/radio/dist/index.js

@@ -0,0 +1,1850 @@
+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`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:50%;left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
+
+var colorCss$2 = 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]){--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark].focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
+
+var tokenCss = 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);
+  }
+};
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @attr {Boolean} checked - If set to true, the radio button will be filled.
+ * @attr {Boolean} disabled - If set to true, the radio button will be non-clickable.
+ * @attr {Boolean} required - Defines element as required.
+ * @attr {Boolean} error - If set to true, sets an error state on the radio button.
+ * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
+ * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
+ * @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.
+ */
+
+// build the component class
+class AuroRadio extends LitElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.onDark = false;
+    this.tabIndex = -1;
+    this.touched = false;
+
+    /**
+     * @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 {
+      checked: {
+        type: Boolean,
+        reflect: true
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+      label:    { type: String },
+      name:     { type: String },
+      value:    { type: String },
+      tabIndex: {
+        type: Number,
+        reflect: true
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-radio"] - The name of element that you want to register to.
+   *
+   * @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('checked')) {
+      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 content when it is invalid accessibility wise.
+   * @private
+   * @param {Boolean} error - The element's error attribute.
+   * @returns {void}
+   */
+  invalid(error) {
+    if (error) {
+      return 'true';
+    }
+
+    return 'false';
+  }
+
+  /**
+   * 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('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">
+        <input
+          class="util_displayHiddenVisually ods-inputOption rdo--input"
+          @focus="${this.handleFocus}"
+          @input="${this.handleInput}"
+          @change="${this.handleChange}"
+          ?disabled="${this.disabled}"
+          aria-invalid="${this.invalid(this.error)}"
+          aria-required="${this.isRequired(this.required)}"
+          .checked="${this.checked}"
+          id="${this.inputId}"
+          name="${ifDefined(this.name)}"
+          type="radio"
+          .value="${this.value}"
+          tabIndex="-1"
+        />
+
+        <label for="${this.inputId}" class="${classMap(labelClasses)}">
+          <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)}`;
+
+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]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
+
+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.
+     * @returns {Object} Returns the date as a string.
+     */
+    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+      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);
+
+      // 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.setCustomValidityTooShort || e.setCustomValidity || ''
+          },
+          {
+            check: (e) => e.value?.length > e.maxLength,
+            validity: 'tooLong',
+            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+          }
+        ],
+        pattern: [
+          {
+            check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
+            validity: 'patternMismatch',
+            message: e => e.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') || ''
+          }
+        ]
+      }
+    };
+
+    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';
+    }
+
+    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);
+
+    // Validate only if noValidate is not true and the input does not have focus
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
+
+    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;
+      }
+
+      // 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;
+        }
+      }
+
+      if (!hasValue && elem.required && elem.touched) {
+        elem.validity = 'valueMissing';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+        this.validateType(elem);
+        this.validateElementAttributes(elem);
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+        this.validateElementAttributes(elem);
+      }
+    }
+
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
+      elem.validity = this.auroInputElements[0].validity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        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.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]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+
+var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.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);
+  }
+}
+
+// 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.
+ *
+ * @attr { Boolean } large - If declared, make font-size to 1rem(16px).
+ */
+class AuroHelpText extends LitElement {
+
+  constructor() {
+    super();
+
+    this.error = false;
+    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 {
+
+      /**
+       * @private
+       */
+      slotNodes: {
+        type: Boolean,
+      },
+
+      /**
+       * @private
+       */
+      hasTextContent: {
+        type: Boolean,
+      },
+
+      /**
+       * If declared, make font color red.
+       */
+      error: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * If declared, will apply onDark styles.
+       */
+      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" ?visible="${this.hasTextContent}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+var helpTextVersion = '1.0.0';
+
+// 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 */
+
+/**
+ * @attr {String} validity - Specifies the `validityState` this element is in.
+ * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
+ * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
+ * @attr {Boolean} onDark - Applies dark mode styles to the component.
+ * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
+ * @attr {Object} optionSelected - Specifies the current selected radio button.
+ * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
+ * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @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.disabled = false;
+    this.horizontal = false;
+    this.required = false;
+    this.validity = undefined;
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.onDark = false;
+    this.touched = 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', helpTextVersion, AuroHelpText);
+  }
+
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokenCss
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled:   {
+        type: Boolean,
+        reflect: true
+      },
+      horizontal: { type: Boolean },
+      error:      {
+        type: String,
+        reflect: true
+      },
+      value: {
+        type: String
+      },
+      noValidate: {
+        type: Boolean,
+        reflect: true
+      },
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+      setCustomValidity: {
+        type: String
+      },
+      setCustomValidityCustomError: {
+        type: String
+      },
+      setCustomValidityValueMissing: {
+        type: String
+      },
+      validity: {
+        type: String,
+        reflect: true
+      },
+      optionSelected: {
+        type: Object
+      },
+
+      /**
+       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-radio-group"] - The name of element that you want to register to.
+   *
+   * @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) {
+    if (event.target.value) {
+      this.value = event.target.value;
+    } else {
+      this.value = '';
+    }
+
+    this.optionSelected = event.target;
+
+    this.validation.validate(this);
+  }
+
+  /**
+   * 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('error')) {
+      this.validate(true);
+    }
+
+    if (changedProperties.has('validity')) {
+      if (this.validity && this.validity !== 'valid') {
+        this.items.forEach((el) => {
+          el.setAttribute('error', true);
+        });
+      } else {
+        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();
+    }
+
+    // handle tab index
+    this.items.forEach((item) => {
+      item.tabIndex = -1;
+    });
+
+    if (!this.disabled) {
+      this.items[this.index].tabIndex = 0;
+    }
+  }
+
+  /**
+   * 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 initializing the tab index of the checked radio input.
+   * @private
+   * @returns {void}
+   */
+  initializeIndex() {
+    if (!this.disabled) {
+      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.index >= 0) {
+        this.items[this.index].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) => {
+      if (item === event.target) {
+        item.tabIndex = 0;
+        if (event.target.value) {
+          this.value = event.target.value;
+        }
+      } else {
+        const sdInput = item.shadowRoot.querySelector('input');
+
+        sdInput.checked = false;
+        item.checked = false;
+        item.tabIndex = -1;
+      }
+    });
+
+    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].shadowRoot.querySelector('input');
+
+    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].shadowRoot.querySelector('input');
+
+      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
+    };
+
+    return html$1`
+      <fieldset class="${classMap(groupClasses)}" part="radio-group">
+        ${this.required
+        ? html$1`<legend><slot name="legend"></slot></legend>`
+        : html$1`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
+      }
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html$1`
+          <${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
+            <slot name="helpText"></slot>
+          </${this.helpTextTag}>`
+        : html$1`
+          <${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
+            ${this.errorMessage}
+          </${this.helpTextTag}>`
+      }
+    `;
+  }
+}
+
+export { AuroRadio, AuroRadioGroup };