@aurodesignsystem/auro-formkit 2.0.3-beta.1 → 2.1.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/bibtemplate/dist/index.js +148 -8
  3. package/components/bibtemplate/dist/registered.js +148 -8
  4. package/components/checkbox/README.md +1 -1
  5. package/components/checkbox/demo/api.min.js +1 -1
  6. package/components/checkbox/demo/index.min.js +1 -1
  7. package/components/checkbox/demo/readme.md +1 -1
  8. package/components/checkbox/dist/index.js +1 -1
  9. package/components/checkbox/dist/registered.js +1 -1
  10. package/components/combobox/README.md +1 -1
  11. package/components/combobox/demo/api.min.js +644 -113
  12. package/components/combobox/demo/index.min.js +644 -113
  13. package/components/combobox/demo/readme.md +1 -1
  14. package/components/combobox/dist/index.js +511 -50
  15. package/components/combobox/dist/registered.js +511 -50
  16. package/components/counter/README.md +1 -1
  17. package/components/counter/demo/api.min.js +500 -39
  18. package/components/counter/demo/index.js +1 -0
  19. package/components/counter/demo/index.min.js +501 -39
  20. package/components/counter/demo/readme.md +1 -1
  21. package/components/counter/dist/index.js +500 -39
  22. package/components/counter/dist/registered.js +500 -39
  23. package/components/datepicker/README.md +1 -1
  24. package/components/datepicker/demo/api.md +30 -0
  25. package/components/datepicker/demo/api.min.js +1281 -207
  26. package/components/datepicker/demo/index.min.js +1281 -207
  27. package/components/datepicker/demo/readme.md +1 -1
  28. package/components/datepicker/dist/auro-calendar.d.ts +5 -1
  29. package/components/datepicker/dist/auro-datepicker.d.ts +7 -0
  30. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  31. package/components/datepicker/dist/index.js +1281 -207
  32. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  33. package/components/datepicker/dist/registered.js +1281 -207
  34. package/components/dropdown/README.md +1 -1
  35. package/components/dropdown/demo/api.min.js +81 -10
  36. package/components/dropdown/demo/index.min.js +81 -10
  37. package/components/dropdown/demo/readme.md +1 -1
  38. package/components/dropdown/dist/index.js +81 -10
  39. package/components/dropdown/dist/registered.js +81 -10
  40. package/components/form/README.md +1 -1
  41. package/components/form/demo/readme.md +1 -1
  42. package/components/input/README.md +1 -1
  43. package/components/input/demo/api.min.js +263 -13
  44. package/components/input/demo/index.min.js +263 -13
  45. package/components/input/demo/readme.md +1 -1
  46. package/components/input/dist/index.js +263 -13
  47. package/components/input/dist/registered.js +263 -13
  48. package/components/menu/README.md +1 -1
  49. package/components/menu/demo/api.min.js +77 -7
  50. package/components/menu/demo/index.min.js +77 -7
  51. package/components/menu/demo/readme.md +1 -1
  52. package/components/menu/dist/index.js +77 -7
  53. package/components/menu/dist/registered.js +77 -7
  54. package/components/radio/README.md +1 -1
  55. package/components/radio/demo/api.min.js +1 -1
  56. package/components/radio/demo/index.min.js +1 -1
  57. package/components/radio/demo/readme.md +1 -1
  58. package/components/radio/dist/index.js +1 -1
  59. package/components/radio/dist/registered.js +1 -1
  60. package/components/select/README.md +1 -1
  61. package/components/select/demo/api.min.js +319 -38
  62. package/components/select/demo/index.min.js +319 -38
  63. package/components/select/demo/readme.md +1 -1
  64. package/components/select/dist/index.js +240 -29
  65. package/components/select/dist/registered.js +240 -29
  66. package/package.json +2 -2
@@ -3806,7 +3806,7 @@ class AuroInputUtilities {
3806
3806
 
3807
3807
  return {
3808
3808
  mask: Date,
3809
- pattern: format,
3809
+ pattern: dateFormat,
3810
3810
  blocks,
3811
3811
  format(date) {
3812
3812
  if (!date) {
@@ -3980,7 +3980,7 @@ class AuroInputUtilities {
3980
3980
 
3981
3981
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
3982
3982
 
3983
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
3983
+ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
3984
3984
 
3985
3985
  /* eslint-disable jsdoc/require-param */
3986
3986
 
@@ -4049,7 +4049,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
4049
4049
 
4050
4050
  class AuroFormValidation {
4051
4051
  constructor() {
4052
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
4052
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
4053
4053
  }
4054
4054
 
4055
4055
  /**
@@ -5313,7 +5313,7 @@ class BaseInput extends LitElement {
5313
5313
  // See LICENSE in the project root for license information.
5314
5314
 
5315
5315
 
5316
- class AuroDependencyVersioning {
5316
+ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
5317
5317
 
5318
5318
  /**
5319
5319
  * Generates a unique string to be used for child auro element naming.
@@ -5347,7 +5347,7 @@ class AuroDependencyVersioning {
5347
5347
 
5348
5348
  return tag;
5349
5349
  }
5350
- }
5350
+ };
5351
5351
 
5352
5352
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
5353
5353
  // See LICENSE in the project root for license information.
@@ -5500,6 +5500,76 @@ var tokensCss$3 = css`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-def
5500
5500
 
5501
5501
  var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
5502
5502
 
5503
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5504
+ // See LICENSE in the project root for license information.
5505
+
5506
+ // ---------------------------------------------------------------------
5507
+
5508
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5509
+
5510
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
5511
+
5512
+ /* eslint-disable jsdoc/require-param */
5513
+
5514
+ /**
5515
+ * This will register a new custom element with the browser.
5516
+ * @param {String} name - The name of the custom element.
5517
+ * @param {Object} componentClass - The class to register as a custom element.
5518
+ * @returns {void}
5519
+ */
5520
+ registerComponent(name, componentClass) {
5521
+ if (!customElements.get(name)) {
5522
+ customElements.define(name, class extends componentClass {});
5523
+ }
5524
+ }
5525
+
5526
+ /**
5527
+ * Finds and returns the closest HTML Element based on a selector.
5528
+ * @returns {void}
5529
+ */
5530
+ closestElement(
5531
+ selector, // selector like in .closest()
5532
+ base = this, // extra functionality to skip a parent
5533
+ __Closest = (el, found = el && el.closest(selector)) =>
5534
+ !el || el === document || el === window
5535
+ ? null // standard .closest() returns null for non-found selectors also
5536
+ : found
5537
+ ? found // found a selector INside this element
5538
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
5539
+ ) {
5540
+ return __Closest(base);
5541
+ }
5542
+ /* eslint-enable jsdoc/require-param */
5543
+
5544
+ /**
5545
+ * 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.
5546
+ * @param {Object} elem - The element to check.
5547
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
5548
+ * @returns {void}
5549
+ */
5550
+ handleComponentTagRename(elem, tagName) {
5551
+ const tag = tagName.toLowerCase();
5552
+ const elemTag = elem.tagName.toLowerCase();
5553
+
5554
+ if (elemTag !== tag) {
5555
+ elem.setAttribute(tag, true);
5556
+ }
5557
+ }
5558
+
5559
+ /**
5560
+ * Validates if an element is a specific Auro component.
5561
+ * @param {Object} elem - The element to validate.
5562
+ * @param {String} tagName - The name of the Auro component to check against.
5563
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
5564
+ */
5565
+ elementMatch(elem, tagName) {
5566
+ const tag = tagName.toLowerCase();
5567
+ const elemTag = elem.tagName.toLowerCase();
5568
+
5569
+ return elemTag === tag || elem.hasAttribute(tag);
5570
+ }
5571
+ };
5572
+
5503
5573
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
5504
5574
  // See LICENSE in the project root for license information.
5505
5575
 
@@ -5532,7 +5602,7 @@ class AuroIcon extends BaseIcon {
5532
5602
  this.tertiary = false;
5533
5603
  this.warning = false;
5534
5604
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
5535
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
5605
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
5536
5606
  }
5537
5607
 
5538
5608
  // function to define props used within the scope of this component
@@ -5694,7 +5764,7 @@ class AuroIcon extends BaseIcon {
5694
5764
  *
5695
5765
  */
5696
5766
  static register(name = "auro-icon") {
5697
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
5767
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
5698
5768
  }
5699
5769
 
5700
5770
  connectedCallback() {
@@ -5762,12 +5832,192 @@ class AuroIcon extends BaseIcon {
5762
5832
 
5763
5833
  var iconVersion = '6.1.2';
5764
5834
 
5835
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5836
+ // See LICENSE in the project root for license information.
5837
+
5838
+
5839
+ class AuroDependencyVersioning {
5840
+
5841
+ /**
5842
+ * Generates a unique string to be used for child auro element naming.
5843
+ * @private
5844
+ * @param {string} baseName - Defines the first part of the unique element name.
5845
+ * @param {string} version - Version of the component that will be appended to the baseName.
5846
+ * @returns {string} - Unique string to be used for naming.
5847
+ */
5848
+ generateElementName(baseName, version) {
5849
+ let result = baseName;
5850
+
5851
+ result += '-';
5852
+ result += version.replace(/[.]/g, '_');
5853
+
5854
+ return result;
5855
+ }
5856
+
5857
+ /**
5858
+ * Generates a unique string to be used for child auro element naming.
5859
+ * @param {string} baseName - Defines the first part of the unique element name.
5860
+ * @param {string} version - Version of the component that will be appended to the baseName.
5861
+ * @returns {string} - Unique string to be used for naming.
5862
+ */
5863
+ generateTag(baseName, version, tagClass) {
5864
+ const elementName = this.generateElementName(baseName, version);
5865
+ const tag = literal`${unsafeStatic(elementName)}`;
5866
+
5867
+ if (!customElements.get(elementName)) {
5868
+ customElements.define(elementName, class extends tagClass {});
5869
+ }
5870
+
5871
+ return tag;
5872
+ }
5873
+ }
5874
+
5875
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5876
+ // See LICENSE in the project root for license information.
5877
+
5878
+ // ---------------------------------------------------------------------
5879
+
5880
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5881
+
5882
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
5883
+
5884
+ /* eslint-disable jsdoc/require-param */
5885
+
5886
+ /**
5887
+ * This will register a new custom element with the browser.
5888
+ * @param {String} name - The name of the custom element.
5889
+ * @param {Object} componentClass - The class to register as a custom element.
5890
+ * @returns {void}
5891
+ */
5892
+ registerComponent(name, componentClass) {
5893
+ if (!customElements.get(name)) {
5894
+ customElements.define(name, class extends componentClass {});
5895
+ }
5896
+ }
5897
+
5898
+ /**
5899
+ * Finds and returns the closest HTML Element based on a selector.
5900
+ * @returns {void}
5901
+ */
5902
+ closestElement(
5903
+ selector, // selector like in .closest()
5904
+ base = this, // extra functionality to skip a parent
5905
+ __Closest = (el, found = el && el.closest(selector)) =>
5906
+ !el || el === document || el === window
5907
+ ? null // standard .closest() returns null for non-found selectors also
5908
+ : found
5909
+ ? found // found a selector INside this element
5910
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
5911
+ ) {
5912
+ return __Closest(base);
5913
+ }
5914
+ /* eslint-enable jsdoc/require-param */
5915
+
5916
+ /**
5917
+ * 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.
5918
+ * @param {Object} elem - The element to check.
5919
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
5920
+ * @returns {void}
5921
+ */
5922
+ handleComponentTagRename(elem, tagName) {
5923
+ const tag = tagName.toLowerCase();
5924
+ const elemTag = elem.tagName.toLowerCase();
5925
+
5926
+ if (elemTag !== tag) {
5927
+ elem.setAttribute(tag, true);
5928
+ }
5929
+ }
5930
+
5931
+ /**
5932
+ * Validates if an element is a specific Auro component.
5933
+ * @param {Object} elem - The element to validate.
5934
+ * @param {String} tagName - The name of the Auro component to check against.
5935
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
5936
+ */
5937
+ elementMatch(elem, tagName) {
5938
+ const tag = tagName.toLowerCase();
5939
+ const elemTag = elem.tagName.toLowerCase();
5940
+
5941
+ return elemTag === tag || elem.hasAttribute(tag);
5942
+ }
5943
+ };
5944
+
5765
5945
  var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
5766
5946
 
5767
5947
  var colorCss$2 = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color:var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
5768
5948
 
5769
5949
  var tokensCss$2 = css`:host{--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color:var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color:transparent}`;
5770
5950
 
5951
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5952
+ // See LICENSE in the project root for license information.
5953
+
5954
+ // ---------------------------------------------------------------------
5955
+
5956
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5957
+
5958
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
5959
+
5960
+ /* eslint-disable jsdoc/require-param */
5961
+
5962
+ /**
5963
+ * This will register a new custom element with the browser.
5964
+ * @param {String} name - The name of the custom element.
5965
+ * @param {Object} componentClass - The class to register as a custom element.
5966
+ * @returns {void}
5967
+ */
5968
+ registerComponent(name, componentClass) {
5969
+ if (!customElements.get(name)) {
5970
+ customElements.define(name, class extends componentClass {});
5971
+ }
5972
+ }
5973
+
5974
+ /**
5975
+ * Finds and returns the closest HTML Element based on a selector.
5976
+ * @returns {void}
5977
+ */
5978
+ closestElement(
5979
+ selector, // selector like in .closest()
5980
+ base = this, // extra functionality to skip a parent
5981
+ __Closest = (el, found = el && el.closest(selector)) =>
5982
+ !el || el === document || el === window
5983
+ ? null // standard .closest() returns null for non-found selectors also
5984
+ : found
5985
+ ? found // found a selector INside this element
5986
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
5987
+ ) {
5988
+ return __Closest(base);
5989
+ }
5990
+ /* eslint-enable jsdoc/require-param */
5991
+
5992
+ /**
5993
+ * 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.
5994
+ * @param {Object} elem - The element to check.
5995
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
5996
+ * @returns {void}
5997
+ */
5998
+ handleComponentTagRename(elem, tagName) {
5999
+ const tag = tagName.toLowerCase();
6000
+ const elemTag = elem.tagName.toLowerCase();
6001
+
6002
+ if (elemTag !== tag) {
6003
+ elem.setAttribute(tag, true);
6004
+ }
6005
+ }
6006
+
6007
+ /**
6008
+ * Validates if an element is a specific Auro component.
6009
+ * @param {Object} elem - The element to validate.
6010
+ * @param {String} tagName - The name of the Auro component to check against.
6011
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
6012
+ */
6013
+ elementMatch(elem, tagName) {
6014
+ const tag = tagName.toLowerCase();
6015
+ const elemTag = elem.tagName.toLowerCase();
6016
+
6017
+ return elemTag === tag || elem.hasAttribute(tag);
6018
+ }
6019
+ };
6020
+
5771
6021
  var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
5772
6022
 
5773
6023
  var colorCss$1 = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color:var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
@@ -6086,7 +6336,7 @@ class AuroButton extends LitElement {
6086
6336
  *
6087
6337
  */
6088
6338
  static register(name = "auro-button") {
6089
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroButton);
6339
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
6090
6340
  }
6091
6341
 
6092
6342
  /**
@@ -6395,22 +6645,22 @@ class AuroInput extends BaseInput {
6395
6645
  /**
6396
6646
  * Generate unique names for dependency components.
6397
6647
  */
6398
- const versioning = new AuroDependencyVersioning();
6648
+ const versioning = new AuroDependencyVersioning$1();
6399
6649
 
6400
6650
  /**
6401
6651
  * @private
6402
6652
  */
6403
- this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
6653
+ this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
6404
6654
 
6405
6655
  /**
6406
6656
  * @private
6407
6657
  */
6408
- this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
6658
+ this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
6409
6659
 
6410
6660
  /**
6411
6661
  * @private
6412
6662
  */
6413
- this.helpTextTag = versioning.generateTag('auro-helptext', helpTextVersion, AuroHelpText);
6663
+ this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helpTextVersion, AuroHelpText);
6414
6664
  }
6415
6665
 
6416
6666
  /**
@@ -6422,7 +6672,7 @@ class AuroInput extends BaseInput {
6422
6672
  *
6423
6673
  */
6424
6674
  static register(name = "auro-input") {
6425
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroInput);
6675
+ AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroInput);
6426
6676
  }
6427
6677
 
6428
6678
  /**
@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
110
110
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
111
111
 
112
112
  ```html
113
- <script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.2/auro-menu/+esm"></script>
113
+ <script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.1/auro-menu/+esm"></script>
114
114
  ```
115
115
  <!-- AURO-GENERATED-CONTENT:END -->
116
116
 
@@ -77,7 +77,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
77
77
 
78
78
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
79
79
 
80
- class AuroLibraryRuntimeUtils {
80
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
81
81
 
82
82
  /* eslint-disable jsdoc/require-param */
83
83
 
@@ -138,7 +138,7 @@ class AuroLibraryRuntimeUtils {
138
138
 
139
139
  return elemTag === tag || elem.hasAttribute(tag);
140
140
  }
141
- }
141
+ };
142
142
 
143
143
  // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
144
144
  // See LICENSE in the project root for license information.
@@ -423,7 +423,7 @@ class AuroMenu extends r {
423
423
  *
424
424
  */
425
425
  static register(name = "auro-menu") {
426
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
426
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
427
427
  }
428
428
 
429
429
  // Lifecycle Methods
@@ -447,7 +447,7 @@ class AuroMenu extends r {
447
447
  }
448
448
 
449
449
  firstUpdated() {
450
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-menu');
450
+ AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-menu');
451
451
 
452
452
  this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
453
453
  this.initializeMenu();
@@ -1204,6 +1204,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-defau
1204
1204
 
1205
1205
  var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
1206
1206
 
1207
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1208
+ // See LICENSE in the project root for license information.
1209
+
1210
+ // ---------------------------------------------------------------------
1211
+
1212
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
1213
+
1214
+ class AuroLibraryRuntimeUtils {
1215
+
1216
+ /* eslint-disable jsdoc/require-param */
1217
+
1218
+ /**
1219
+ * This will register a new custom element with the browser.
1220
+ * @param {String} name - The name of the custom element.
1221
+ * @param {Object} componentClass - The class to register as a custom element.
1222
+ * @returns {void}
1223
+ */
1224
+ registerComponent(name, componentClass) {
1225
+ if (!customElements.get(name)) {
1226
+ customElements.define(name, class extends componentClass {});
1227
+ }
1228
+ }
1229
+
1230
+ /**
1231
+ * Finds and returns the closest HTML Element based on a selector.
1232
+ * @returns {void}
1233
+ */
1234
+ closestElement(
1235
+ selector, // selector like in .closest()
1236
+ base = this, // extra functionality to skip a parent
1237
+ __Closest = (el, found = el && el.closest(selector)) =>
1238
+ !el || el === document || el === window
1239
+ ? null // standard .closest() returns null for non-found selectors also
1240
+ : found
1241
+ ? found // found a selector INside this element
1242
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
1243
+ ) {
1244
+ return __Closest(base);
1245
+ }
1246
+ /* eslint-enable jsdoc/require-param */
1247
+
1248
+ /**
1249
+ * 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.
1250
+ * @param {Object} elem - The element to check.
1251
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
1252
+ * @returns {void}
1253
+ */
1254
+ handleComponentTagRename(elem, tagName) {
1255
+ const tag = tagName.toLowerCase();
1256
+ const elemTag = elem.tagName.toLowerCase();
1257
+
1258
+ if (elemTag !== tag) {
1259
+ elem.setAttribute(tag, true);
1260
+ }
1261
+ }
1262
+
1263
+ /**
1264
+ * Validates if an element is a specific Auro component.
1265
+ * @param {Object} elem - The element to validate.
1266
+ * @param {String} tagName - The name of the Auro component to check against.
1267
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
1268
+ */
1269
+ elementMatch(elem, tagName) {
1270
+ const tag = tagName.toLowerCase();
1271
+ const elemTag = elem.tagName.toLowerCase();
1272
+
1273
+ return elemTag === tag || elem.hasAttribute(tag);
1274
+ }
1275
+ }
1276
+
1207
1277
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1208
1278
  // See LICENSE in the project root for license information.
1209
1279
 
@@ -1490,7 +1560,7 @@ class AuroMenuOption extends r {
1490
1560
  * Generate unique names for dependency components.
1491
1561
  */
1492
1562
  const versioning = new AuroDependencyVersioning();
1493
- this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
1563
+ this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion, AuroIcon);
1494
1564
 
1495
1565
  this.selected = false;
1496
1566
  this.nocheckmark = false;
@@ -1504,7 +1574,7 @@ class AuroMenuOption extends r {
1504
1574
  /**
1505
1575
  * @private
1506
1576
  */
1507
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1577
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
1508
1578
  }
1509
1579
 
1510
1580
  static get properties() {
@@ -1548,7 +1618,7 @@ class AuroMenuOption extends r {
1548
1618
  *
1549
1619
  */
1550
1620
  static register(name = "auro-menuoption") {
1551
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
1621
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenuOption);
1552
1622
  }
1553
1623
 
1554
1624
  firstUpdated() {