@aurodesignsystem/auro-formkit 4.0.0 → 4.0.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 (49) hide show
  1. package/CHANGELOG.md +2 -23
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +1 -0
  3. package/components/bibtemplate/dist/index.js +158 -6
  4. package/components/bibtemplate/dist/registered.js +158 -6
  5. package/components/checkbox/README.md +1 -1
  6. package/components/checkbox/demo/api.md +2 -2
  7. package/components/checkbox/demo/api.min.js +24 -20
  8. package/components/checkbox/demo/index.md +2 -2
  9. package/components/checkbox/demo/index.min.js +24 -20
  10. package/components/checkbox/demo/readme.md +1 -1
  11. package/components/checkbox/dist/auro-checkbox.d.ts +2 -2
  12. package/components/checkbox/dist/index.js +24 -20
  13. package/components/checkbox/dist/registered.js +24 -20
  14. package/components/combobox/demo/api.min.js +707 -133
  15. package/components/combobox/demo/index.min.js +707 -133
  16. package/components/combobox/dist/auro-combobox.d.ts +0 -8
  17. package/components/combobox/dist/index.js +627 -123
  18. package/components/combobox/dist/registered.js +627 -123
  19. package/components/counter/demo/api.min.js +583 -43
  20. package/components/counter/demo/index.min.js +583 -43
  21. package/components/counter/dist/index.js +583 -43
  22. package/components/counter/dist/registered.js +583 -43
  23. package/components/datepicker/demo/api.min.js +866 -75
  24. package/components/datepicker/demo/index.min.js +866 -75
  25. package/components/datepicker/dist/index.js +866 -75
  26. package/components/datepicker/dist/registered.js +866 -75
  27. package/components/dropdown/demo/api.min.js +153 -16
  28. package/components/dropdown/demo/index.min.js +153 -16
  29. package/components/dropdown/dist/auro-dropdownBib.d.ts +8 -0
  30. package/components/dropdown/dist/index.js +153 -16
  31. package/components/dropdown/dist/registered.js +153 -16
  32. package/components/input/demo/api.min.js +263 -12
  33. package/components/input/demo/index.min.js +263 -12
  34. package/components/input/dist/index.js +263 -12
  35. package/components/input/dist/registered.js +263 -12
  36. package/components/menu/demo/api.min.js +76 -6
  37. package/components/menu/demo/index.min.js +76 -6
  38. package/components/menu/dist/index.js +76 -6
  39. package/components/menu/dist/registered.js +76 -6
  40. package/components/radio/demo/api.min.js +4 -3
  41. package/components/radio/demo/index.min.js +4 -3
  42. package/components/radio/dist/index.js +4 -3
  43. package/components/radio/dist/registered.js +4 -3
  44. package/components/select/demo/api.min.js +403 -49
  45. package/components/select/demo/index.min.js +403 -49
  46. package/components/select/dist/auro-select.d.ts +0 -1
  47. package/components/select/dist/index.js +325 -41
  48. package/components/select/dist/registered.js +325 -41
  49. package/package.json +3 -3
@@ -13,7 +13,7 @@ var styleButtonCss = css`:focus:not(:focus-visible){outline:3px solid transparen
13
13
  // See LICENSE in the project root for license information.
14
14
 
15
15
 
16
- let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
16
+ let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
17
17
 
18
18
  /**
19
19
  * Generates a unique string to be used for child auro element naming.
@@ -56,7 +56,7 @@ let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
56
56
 
57
57
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
58
58
 
59
- let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
59
+ let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
60
60
 
61
61
  /* eslint-disable jsdoc/require-param */
62
62
 
@@ -125,6 +125,76 @@ var colorCss$8 = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.aur
125
125
 
126
126
  var tokensCss$6 = css`:host{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}`;
127
127
 
128
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
129
+ // See LICENSE in the project root for license information.
130
+
131
+ // ---------------------------------------------------------------------
132
+
133
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
134
+
135
+ let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
136
+
137
+ /* eslint-disable jsdoc/require-param */
138
+
139
+ /**
140
+ * This will register a new custom element with the browser.
141
+ * @param {String} name - The name of the custom element.
142
+ * @param {Object} componentClass - The class to register as a custom element.
143
+ * @returns {void}
144
+ */
145
+ registerComponent(name, componentClass) {
146
+ if (!customElements.get(name)) {
147
+ customElements.define(name, class extends componentClass {});
148
+ }
149
+ }
150
+
151
+ /**
152
+ * Finds and returns the closest HTML Element based on a selector.
153
+ * @returns {void}
154
+ */
155
+ closestElement(
156
+ selector, // selector like in .closest()
157
+ base = this, // extra functionality to skip a parent
158
+ __Closest = (el, found = el && el.closest(selector)) =>
159
+ !el || el === document || el === window
160
+ ? null // standard .closest() returns null for non-found selectors also
161
+ : found
162
+ ? found // found a selector INside this element
163
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
164
+ ) {
165
+ return __Closest(base);
166
+ }
167
+ /* eslint-enable jsdoc/require-param */
168
+
169
+ /**
170
+ * 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.
171
+ * @param {Object} elem - The element to check.
172
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
173
+ * @returns {void}
174
+ */
175
+ handleComponentTagRename(elem, tagName) {
176
+ const tag = tagName.toLowerCase();
177
+ const elemTag = elem.tagName.toLowerCase();
178
+
179
+ if (elemTag !== tag) {
180
+ elem.setAttribute(tag, true);
181
+ }
182
+ }
183
+
184
+ /**
185
+ * Validates if an element is a specific Auro component.
186
+ * @param {Object} elem - The element to validate.
187
+ * @param {String} tagName - The name of the Auro component to check against.
188
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
189
+ */
190
+ elementMatch(elem, tagName) {
191
+ const tag = tagName.toLowerCase();
192
+ const elemTag = elem.tagName.toLowerCase();
193
+
194
+ return elemTag === tag || elem.hasAttribute(tag);
195
+ }
196
+ };
197
+
128
198
  var styleCss$8 = 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}}`;
129
199
 
130
200
  var colorCss$7 = 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-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}: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}`;
@@ -157,7 +227,7 @@ class AuroLoader extends LitElement {
157
227
  /**
158
228
  * @private
159
229
  */
160
- this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
230
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
161
231
 
162
232
  this.orbit = false;
163
233
  this.ringworm = false;
@@ -220,7 +290,7 @@ class AuroLoader extends LitElement {
220
290
  *
221
291
  */
222
292
  static register(name = "auro-loader") {
223
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroLoader);
293
+ AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroLoader);
224
294
  }
225
295
 
226
296
  firstUpdated() {
@@ -349,7 +419,7 @@ class AuroButton extends LitElement {
349
419
  /**
350
420
  * Generate unique names for dependency components.
351
421
  */
352
- const versioning = new AuroDependencyVersioning$2();
422
+ const versioning = new AuroDependencyVersioning$3();
353
423
 
354
424
  /**
355
425
  * @private
@@ -451,7 +521,7 @@ class AuroButton extends LitElement {
451
521
  *
452
522
  */
453
523
  static register(name = "auro-button") {
454
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
524
+ AuroLibraryRuntimeUtils$7.prototype.registerComponent(name, AuroButton);
455
525
  }
456
526
 
457
527
  /**
@@ -558,6 +628,76 @@ class AuroButton extends LitElement {
558
628
  }
559
629
  }
560
630
 
631
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
632
+ // See LICENSE in the project root for license information.
633
+
634
+ // ---------------------------------------------------------------------
635
+
636
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
637
+
638
+ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
639
+
640
+ /* eslint-disable jsdoc/require-param */
641
+
642
+ /**
643
+ * This will register a new custom element with the browser.
644
+ * @param {String} name - The name of the custom element.
645
+ * @param {Object} componentClass - The class to register as a custom element.
646
+ * @returns {void}
647
+ */
648
+ registerComponent(name, componentClass) {
649
+ if (!customElements.get(name)) {
650
+ customElements.define(name, class extends componentClass {});
651
+ }
652
+ }
653
+
654
+ /**
655
+ * Finds and returns the closest HTML Element based on a selector.
656
+ * @returns {void}
657
+ */
658
+ closestElement(
659
+ selector, // selector like in .closest()
660
+ base = this, // extra functionality to skip a parent
661
+ __Closest = (el, found = el && el.closest(selector)) =>
662
+ !el || el === document || el === window
663
+ ? null // standard .closest() returns null for non-found selectors also
664
+ : found
665
+ ? found // found a selector INside this element
666
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
667
+ ) {
668
+ return __Closest(base);
669
+ }
670
+ /* eslint-enable jsdoc/require-param */
671
+
672
+ /**
673
+ * 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.
674
+ * @param {Object} elem - The element to check.
675
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
676
+ * @returns {void}
677
+ */
678
+ handleComponentTagRename(elem, tagName) {
679
+ const tag = tagName.toLowerCase();
680
+ const elemTag = elem.tagName.toLowerCase();
681
+
682
+ if (elemTag !== tag) {
683
+ elem.setAttribute(tag, true);
684
+ }
685
+ }
686
+
687
+ /**
688
+ * Validates if an element is a specific Auro component.
689
+ * @param {Object} elem - The element to validate.
690
+ * @param {String} tagName - The name of the Auro component to check against.
691
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
692
+ */
693
+ elementMatch(elem, tagName) {
694
+ const tag = tagName.toLowerCase();
695
+ const elemTag = elem.tagName.toLowerCase();
696
+
697
+ return elemTag === tag || elem.hasAttribute(tag);
698
+ }
699
+ };
700
+
561
701
  // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
562
702
  // See LICENSE in the project root for license information.
563
703
 
@@ -582,7 +722,7 @@ class AuroCounterButton extends AuroButton {
582
722
  *
583
723
  */
584
724
  static register(name = "auro-counter-button") {
585
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounterButton);
725
+ AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterButton);
586
726
  }
587
727
  }
588
728
 
@@ -592,6 +732,46 @@ if (!customElements.get("auro-counter-button")) {
592
732
  customElements.define("auro-counter-button", AuroCounterButton);
593
733
  }
594
734
 
735
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
736
+ // See LICENSE in the project root for license information.
737
+
738
+
739
+ let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
740
+
741
+ /**
742
+ * Generates a unique string to be used for child auro element naming.
743
+ * @private
744
+ * @param {string} baseName - Defines the first part of the unique element name.
745
+ * @param {string} version - Version of the component that will be appended to the baseName.
746
+ * @returns {string} - Unique string to be used for naming.
747
+ */
748
+ generateElementName(baseName, version) {
749
+ let result = baseName;
750
+
751
+ result += '-';
752
+ result += version.replace(/[.]/g, '_');
753
+
754
+ return result;
755
+ }
756
+
757
+ /**
758
+ * Generates a unique string to be used for child auro element naming.
759
+ * @param {string} baseName - Defines the first part of the unique element name.
760
+ * @param {string} version - Version of the component that will be appended to the baseName.
761
+ * @returns {string} - Unique string to be used for naming.
762
+ */
763
+ generateTag(baseName, version, tagClass) {
764
+ const elementName = this.generateElementName(baseName, version);
765
+ const tag = literal`${unsafeStatic(elementName)}`;
766
+
767
+ if (!customElements.get(elementName)) {
768
+ customElements.define(elementName, class extends tagClass {});
769
+ }
770
+
771
+ return tag;
772
+ }
773
+ };
774
+
595
775
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
596
776
  // See LICENSE in the project root for license information.
597
777
 
@@ -746,6 +926,76 @@ var tokensCss$4 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-d
746
926
 
747
927
  var colorCss$6 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
748
928
 
929
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
930
+ // See LICENSE in the project root for license information.
931
+
932
+ // ---------------------------------------------------------------------
933
+
934
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
935
+
936
+ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
937
+
938
+ /* eslint-disable jsdoc/require-param */
939
+
940
+ /**
941
+ * This will register a new custom element with the browser.
942
+ * @param {String} name - The name of the custom element.
943
+ * @param {Object} componentClass - The class to register as a custom element.
944
+ * @returns {void}
945
+ */
946
+ registerComponent(name, componentClass) {
947
+ if (!customElements.get(name)) {
948
+ customElements.define(name, class extends componentClass {});
949
+ }
950
+ }
951
+
952
+ /**
953
+ * Finds and returns the closest HTML Element based on a selector.
954
+ * @returns {void}
955
+ */
956
+ closestElement(
957
+ selector, // selector like in .closest()
958
+ base = this, // extra functionality to skip a parent
959
+ __Closest = (el, found = el && el.closest(selector)) =>
960
+ !el || el === document || el === window
961
+ ? null // standard .closest() returns null for non-found selectors also
962
+ : found
963
+ ? found // found a selector INside this element
964
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
965
+ ) {
966
+ return __Closest(base);
967
+ }
968
+ /* eslint-enable jsdoc/require-param */
969
+
970
+ /**
971
+ * 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.
972
+ * @param {Object} elem - The element to check.
973
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
974
+ * @returns {void}
975
+ */
976
+ handleComponentTagRename(elem, tagName) {
977
+ const tag = tagName.toLowerCase();
978
+ const elemTag = elem.tagName.toLowerCase();
979
+
980
+ if (elemTag !== tag) {
981
+ elem.setAttribute(tag, true);
982
+ }
983
+ }
984
+
985
+ /**
986
+ * Validates if an element is a specific Auro component.
987
+ * @param {Object} elem - The element to validate.
988
+ * @param {String} tagName - The name of the Auro component to check against.
989
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
990
+ */
991
+ elementMatch(elem, tagName) {
992
+ const tag = tagName.toLowerCase();
993
+ const elemTag = elem.tagName.toLowerCase();
994
+
995
+ return elemTag === tag || elem.hasAttribute(tag);
996
+ }
997
+ };
998
+
749
999
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
750
1000
  // See LICENSE in the project root for license information.
751
1001
 
@@ -765,7 +1015,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
765
1015
  */
766
1016
  privateDefaults() {
767
1017
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
768
- this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
1018
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
769
1019
  }
770
1020
 
771
1021
  // function to define props used within the scope of this component
@@ -847,7 +1097,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
847
1097
  *
848
1098
  */
849
1099
  static register(name = "auro-icon") {
850
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
1100
+ AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroIcon);
851
1101
  }
852
1102
 
853
1103
  connectedCallback() {
@@ -971,9 +1221,10 @@ class DateFormatter {
971
1221
  /**
972
1222
  * Convert a date object to string format.
973
1223
  * @param {Object} date - Date to convert to string.
974
- * @returns {Object} Returns the date as a string.
1224
+ * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
1225
+ * @returns {String} Returns the date as a string.
975
1226
  */
976
- this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
1227
+ this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
977
1228
  year: "numeric",
978
1229
  month: "2-digit",
979
1230
  day: "2-digit",
@@ -1165,7 +1416,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
1165
1416
  const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
1166
1417
 
1167
1418
  // Get the date string of the date object we created from the string date
1168
- const actualDateStr = dateFormatter.getDateAsString(dateObj);
1419
+ const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
1169
1420
 
1170
1421
  // Guard Clause: Generated date matches date string input
1171
1422
  if (expectedDateStr !== actualDateStr) {
@@ -1330,7 +1581,7 @@ const {
1330
1581
  class AuroFormValidation {
1331
1582
 
1332
1583
  constructor() {
1333
- this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
1584
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
1334
1585
  }
1335
1586
 
1336
1587
  /**
@@ -1876,7 +2127,7 @@ class AuroCounter extends LitElement {
1876
2127
  * AuroCounter.register("custom-counter") // registers <custom-counter/>
1877
2128
  */
1878
2129
  static register(name = "auro-counter") {
1879
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounter);
2130
+ AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounter);
1880
2131
  }
1881
2132
 
1882
2133
  static get styles() {
@@ -2062,7 +2313,7 @@ var styleCss$5 = css`:host{position:relative;display:block}[slot=trigger],::slot
2062
2313
 
2063
2314
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
2064
2315
 
2065
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
2316
+ let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
2066
2317
 
2067
2318
  /* eslint-disable jsdoc/require-param */
2068
2319
 
@@ -3657,8 +3908,28 @@ class AuroFloatingUI {
3657
3908
  if (!AuroFloatingUI.isMousePressHandlerInitialized && window && window.addEventListener) {
3658
3909
  AuroFloatingUI.isMousePressHandlerInitialized = true;
3659
3910
 
3911
+ // Track timeout for isMousePressed reset to avoid race conditions
3912
+ if (!AuroFloatingUI._mousePressedTimeout) {
3913
+ AuroFloatingUI._mousePressedTimeout = null;
3914
+ }
3660
3915
  const mouseEventGlobalHandler = (event) => {
3661
- AuroFloatingUI.isMousePressed = event.type === 'mousedown';
3916
+ const isPressed = event.type === 'mousedown';
3917
+ if (isPressed) {
3918
+ // Clear any pending timeout to prevent race condition
3919
+ if (AuroFloatingUI._mousePressedTimeout !== null) {
3920
+ clearTimeout(AuroFloatingUI._mousePressedTimeout);
3921
+ AuroFloatingUI._mousePressedTimeout = null;
3922
+ }
3923
+ if (!AuroFloatingUI.isMousePressed) {
3924
+ AuroFloatingUI.isMousePressed = true;
3925
+ }
3926
+ } else if (AuroFloatingUI.isMousePressed && !isPressed) {
3927
+ // Schedule reset and track timeout ID
3928
+ AuroFloatingUI._mousePressedTimeout = setTimeout(() => {
3929
+ AuroFloatingUI.isMousePressed = false;
3930
+ AuroFloatingUI._mousePressedTimeout = null;
3931
+ }, 0);
3932
+ }
3662
3933
  };
3663
3934
 
3664
3935
  window.addEventListener('mousedown', mouseEventGlobalHandler);
@@ -3785,6 +4056,7 @@ class AuroFloatingUI {
3785
4056
 
3786
4057
  // Compute the position of the bib
3787
4058
  computePosition(this.element.trigger, this.element.bib, {
4059
+ strategy: this.element.floaterConfig?.strategy || 'fixed',
3788
4060
  placement: this.element.floaterConfig?.placement,
3789
4061
  middleware: middleware || []
3790
4062
  }).then(({ x, y }) => { // eslint-disable-line id-length
@@ -3919,8 +4191,9 @@ class AuroFloatingUI {
3919
4191
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
3920
4192
  return;
3921
4193
  }
3922
- // if fullscreen bib is still open and the focus is missing, do not close
3923
- if (this.element.bib.hasAttribute('isfullscreen') && activeElement === document.body) {
4194
+
4195
+ // if fullscreen bib is in fullscreen mode, do not close
4196
+ if (this.element.bib.hasAttribute('isfullscreen')) {
3924
4197
  return;
3925
4198
  }
3926
4199
 
@@ -4221,8 +4494,6 @@ class AuroFloatingUI {
4221
4494
  this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
4222
4495
  }
4223
4496
 
4224
- document.body.append(this.element.bib);
4225
-
4226
4497
  this.regenerateBibId();
4227
4498
  this.handleTriggerTabIndex();
4228
4499
 
@@ -4453,6 +4724,76 @@ var tokensCss$2 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-d
4453
4724
 
4454
4725
  var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
4455
4726
 
4727
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
4728
+ // See LICENSE in the project root for license information.
4729
+
4730
+ // ---------------------------------------------------------------------
4731
+
4732
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
4733
+
4734
+ let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
4735
+
4736
+ /* eslint-disable jsdoc/require-param */
4737
+
4738
+ /**
4739
+ * This will register a new custom element with the browser.
4740
+ * @param {String} name - The name of the custom element.
4741
+ * @param {Object} componentClass - The class to register as a custom element.
4742
+ * @returns {void}
4743
+ */
4744
+ registerComponent(name, componentClass) {
4745
+ if (!customElements.get(name)) {
4746
+ customElements.define(name, class extends componentClass {});
4747
+ }
4748
+ }
4749
+
4750
+ /**
4751
+ * Finds and returns the closest HTML Element based on a selector.
4752
+ * @returns {void}
4753
+ */
4754
+ closestElement(
4755
+ selector, // selector like in .closest()
4756
+ base = this, // extra functionality to skip a parent
4757
+ __Closest = (el, found = el && el.closest(selector)) =>
4758
+ !el || el === document || el === window
4759
+ ? null // standard .closest() returns null for non-found selectors also
4760
+ : found
4761
+ ? found // found a selector INside this element
4762
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
4763
+ ) {
4764
+ return __Closest(base);
4765
+ }
4766
+ /* eslint-enable jsdoc/require-param */
4767
+
4768
+ /**
4769
+ * 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.
4770
+ * @param {Object} elem - The element to check.
4771
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
4772
+ * @returns {void}
4773
+ */
4774
+ handleComponentTagRename(elem, tagName) {
4775
+ const tag = tagName.toLowerCase();
4776
+ const elemTag = elem.tagName.toLowerCase();
4777
+
4778
+ if (elemTag !== tag) {
4779
+ elem.setAttribute(tag, true);
4780
+ }
4781
+ }
4782
+
4783
+ /**
4784
+ * Validates if an element is a specific Auro component.
4785
+ * @param {Object} elem - The element to validate.
4786
+ * @param {String} tagName - The name of the Auro component to check against.
4787
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
4788
+ */
4789
+ elementMatch(elem, tagName) {
4790
+ const tag = tagName.toLowerCase();
4791
+ const elemTag = elem.tagName.toLowerCase();
4792
+
4793
+ return elemTag === tag || elem.hasAttribute(tag);
4794
+ }
4795
+ };
4796
+
4456
4797
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4457
4798
  // See LICENSE in the project root for license information.
4458
4799
 
@@ -4472,7 +4813,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4472
4813
  */
4473
4814
  privateDefaults() {
4474
4815
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
4475
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
4816
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
4476
4817
  }
4477
4818
 
4478
4819
  // function to define props used within the scope of this component
@@ -4554,7 +4895,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4554
4895
  *
4555
4896
  */
4556
4897
  static register(name = "auro-icon") {
4557
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
4898
+ AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroIcon);
4558
4899
  }
4559
4900
 
4560
4901
  connectedCallback() {
@@ -4622,7 +4963,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4622
4963
 
4623
4964
  var iconVersion$1 = '6.1.2';
4624
4965
 
4625
- var styleCss$2$1 = css`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
4966
+ var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
4626
4967
 
4627
4968
  var colorCss$2$1 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
4628
4969
 
@@ -4632,7 +4973,6 @@ var tokensCss$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
4632
4973
  // See LICENSE in the project root for license information.
4633
4974
 
4634
4975
 
4635
-
4636
4976
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
4637
4977
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
4638
4978
  'xl',
@@ -4657,7 +4997,7 @@ class AuroDropdownBib extends LitElement {
4657
4997
  */
4658
4998
  this._mobileBreakpointValue = undefined;
4659
4999
 
4660
- AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
5000
+ AuroLibraryRuntimeUtils$2$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
4661
5001
  }
4662
5002
 
4663
5003
  static get styles() {
@@ -4702,6 +5042,13 @@ class AuroDropdownBib extends LitElement {
4702
5042
  type: Boolean,
4703
5043
  reflect: true
4704
5044
  },
5045
+
5046
+ /**
5047
+ * A reference to the associated bib template element.
5048
+ */
5049
+ bibTemplate: {
5050
+ type: Object
5051
+ }
4705
5052
  };
4706
5053
  }
4707
5054
 
@@ -4734,9 +5081,50 @@ class AuroDropdownBib extends LitElement {
4734
5081
  }
4735
5082
  }
4736
5083
  });
5084
+
5085
+ if (this.bibTemplate) {
5086
+ // If the bib template is found, set the fullscreen attribute
5087
+ if (this.isFullscreen) {
5088
+ this.bibTemplate.setAttribute('isFullscreen', 'true');
5089
+ } else {
5090
+ this.bibTemplate.removeAttribute('isFullscreen');
5091
+ }
5092
+ }
4737
5093
  }
4738
5094
  }
4739
5095
 
5096
+ connectedCallback() {
5097
+ super.connectedCallback();
5098
+
5099
+ // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
5100
+ this.addEventListener('auro-bibtemplate-connected', (event) => {
5101
+ const bibTemplate = event.detail.element;
5102
+ this.bibTemplate = bibTemplate;
5103
+
5104
+ if (bibTemplate) {
5105
+ // If the bib template is found, set the fullscreen attribute
5106
+ if (this.isFullscreen) {
5107
+ bibTemplate.setAttribute('isFullscreen', 'true');
5108
+ } else {
5109
+ bibTemplate.removeAttribute('isFullscreen');
5110
+ }
5111
+ }
5112
+ });
5113
+ }
5114
+
5115
+ firstUpdated(changedProperties) {
5116
+ super.firstUpdated(changedProperties);
5117
+
5118
+ // Dispatch a custom event when the component is connected
5119
+ this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
5120
+ bubbles: true,
5121
+ composed: true,
5122
+ detail: {
5123
+ element: this
5124
+ }
5125
+ }));
5126
+ }
5127
+
4740
5128
  // function that renders the HTML and CSS into the scope of the component
4741
5129
  render() {
4742
5130
  return html$1`
@@ -4766,7 +5154,7 @@ var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
4766
5154
 
4767
5155
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
4768
5156
 
4769
- let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
5157
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
4770
5158
 
4771
5159
  /* eslint-disable jsdoc/require-param */
4772
5160
 
@@ -4847,7 +5235,7 @@ class AuroHelpText extends LitElement {
4847
5235
  this.onDark = false;
4848
5236
  this.hasTextContent = false;
4849
5237
 
4850
- AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-helptext');
5238
+ AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
4851
5239
  }
4852
5240
 
4853
5241
  static get styles() {
@@ -4903,7 +5291,7 @@ class AuroHelpText extends LitElement {
4903
5291
  *
4904
5292
  */
4905
5293
  static register(name = "auro-helptext") {
4906
- AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHelpText);
5294
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
4907
5295
  }
4908
5296
 
4909
5297
  updated() {
@@ -5046,7 +5434,7 @@ class AuroDropdown extends LitElement {
5046
5434
  /**
5047
5435
  * @private
5048
5436
  */
5049
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
5437
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$2$1();
5050
5438
 
5051
5439
  /**
5052
5440
  * @private
@@ -5375,7 +5763,7 @@ class AuroDropdown extends LitElement {
5375
5763
  *
5376
5764
  */
5377
5765
  static register(name = "auro-dropdown") {
5378
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
5766
+ AuroLibraryRuntimeUtils$2$1.prototype.registerComponent(name, AuroDropdown);
5379
5767
  }
5380
5768
 
5381
5769
  /**
@@ -5692,8 +6080,7 @@ class AuroDropdown extends LitElement {
5692
6080
  * @param {Event} event - The event object representing the slot change.
5693
6081
  * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
5694
6082
  */
5695
- handleDefaultSlot(event) {
5696
- [...event.target.assignedNodes()].forEach((node) => this.bibContent.append(node));
6083
+ handleDefaultSlot() {
5697
6084
 
5698
6085
  if (this.onSlotChange) {
5699
6086
  this.onSlotChange();
@@ -5765,9 +6152,7 @@ class AuroDropdown extends LitElement {
5765
6152
  <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
5766
6153
  <slot name="helpText"></slot>
5767
6154
  </${this.helpTextTag}>
5768
- <div class="slotContent">
5769
- <slot @slotchange="${this.handleDefaultSlot}"></slot>
5770
- </div>
6155
+
5771
6156
  <div id="bibSizer" part="size"></div>
5772
6157
  <${this.dropdownBibTag}
5773
6158
  id="bib"
@@ -5777,6 +6162,9 @@ class AuroDropdown extends LitElement {
5777
6162
  ?rounded="${this.common || this.rounded}"
5778
6163
  ?inset="${this.common || this.inset}"
5779
6164
  >
6165
+ <div class="slotContent">
6166
+ <slot @slotchange="${this.handleDefaultSlot}"></slot>
6167
+ </div>
5780
6168
  </${this.dropdownBibTag}>
5781
6169
  </div>
5782
6170
  `;
@@ -5798,7 +6186,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
5798
6186
 
5799
6187
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5800
6188
 
5801
- class AuroLibraryRuntimeUtils {
6189
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
5802
6190
 
5803
6191
  /* eslint-disable jsdoc/require-param */
5804
6192
 
@@ -5859,7 +6247,7 @@ class AuroLibraryRuntimeUtils {
5859
6247
 
5860
6248
  return elemTag === tag || elem.hasAttribute(tag);
5861
6249
  }
5862
- }
6250
+ };
5863
6251
 
5864
6252
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5865
6253
  // See LICENSE in the project root for license information.
@@ -6055,6 +6443,76 @@ var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-def
6055
6443
 
6056
6444
  var colorCss$2 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
6057
6445
 
6446
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
6447
+ // See LICENSE in the project root for license information.
6448
+
6449
+ // ---------------------------------------------------------------------
6450
+
6451
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
6452
+
6453
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
6454
+
6455
+ /* eslint-disable jsdoc/require-param */
6456
+
6457
+ /**
6458
+ * This will register a new custom element with the browser.
6459
+ * @param {String} name - The name of the custom element.
6460
+ * @param {Object} componentClass - The class to register as a custom element.
6461
+ * @returns {void}
6462
+ */
6463
+ registerComponent(name, componentClass) {
6464
+ if (!customElements.get(name)) {
6465
+ customElements.define(name, class extends componentClass {});
6466
+ }
6467
+ }
6468
+
6469
+ /**
6470
+ * Finds and returns the closest HTML Element based on a selector.
6471
+ * @returns {void}
6472
+ */
6473
+ closestElement(
6474
+ selector, // selector like in .closest()
6475
+ base = this, // extra functionality to skip a parent
6476
+ __Closest = (el, found = el && el.closest(selector)) =>
6477
+ !el || el === document || el === window
6478
+ ? null // standard .closest() returns null for non-found selectors also
6479
+ : found
6480
+ ? found // found a selector INside this element
6481
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
6482
+ ) {
6483
+ return __Closest(base);
6484
+ }
6485
+ /* eslint-enable jsdoc/require-param */
6486
+
6487
+ /**
6488
+ * 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.
6489
+ * @param {Object} elem - The element to check.
6490
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
6491
+ * @returns {void}
6492
+ */
6493
+ handleComponentTagRename(elem, tagName) {
6494
+ const tag = tagName.toLowerCase();
6495
+ const elemTag = elem.tagName.toLowerCase();
6496
+
6497
+ if (elemTag !== tag) {
6498
+ elem.setAttribute(tag, true);
6499
+ }
6500
+ }
6501
+
6502
+ /**
6503
+ * Validates if an element is a specific Auro component.
6504
+ * @param {Object} elem - The element to validate.
6505
+ * @param {String} tagName - The name of the Auro component to check against.
6506
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
6507
+ */
6508
+ elementMatch(elem, tagName) {
6509
+ const tag = tagName.toLowerCase();
6510
+ const elemTag = elem.tagName.toLowerCase();
6511
+
6512
+ return elemTag === tag || elem.hasAttribute(tag);
6513
+ }
6514
+ };
6515
+
6058
6516
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6059
6517
  // See LICENSE in the project root for license information.
6060
6518
 
@@ -6074,7 +6532,7 @@ class AuroIcon extends BaseIcon {
6074
6532
  */
6075
6533
  privateDefaults() {
6076
6534
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
6077
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
6535
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
6078
6536
  }
6079
6537
 
6080
6538
  // function to define props used within the scope of this component
@@ -6156,7 +6614,7 @@ class AuroIcon extends BaseIcon {
6156
6614
  *
6157
6615
  */
6158
6616
  static register(name = "auro-icon") {
6159
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
6617
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
6160
6618
  }
6161
6619
 
6162
6620
  connectedCallback() {
@@ -6224,6 +6682,76 @@ class AuroIcon extends BaseIcon {
6224
6682
 
6225
6683
  var iconVersion = '8.0.2';
6226
6684
 
6685
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
6686
+ // See LICENSE in the project root for license information.
6687
+
6688
+ // ---------------------------------------------------------------------
6689
+
6690
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
6691
+
6692
+ class AuroLibraryRuntimeUtils {
6693
+
6694
+ /* eslint-disable jsdoc/require-param */
6695
+
6696
+ /**
6697
+ * This will register a new custom element with the browser.
6698
+ * @param {String} name - The name of the custom element.
6699
+ * @param {Object} componentClass - The class to register as a custom element.
6700
+ * @returns {void}
6701
+ */
6702
+ registerComponent(name, componentClass) {
6703
+ if (!customElements.get(name)) {
6704
+ customElements.define(name, class extends componentClass {});
6705
+ }
6706
+ }
6707
+
6708
+ /**
6709
+ * Finds and returns the closest HTML Element based on a selector.
6710
+ * @returns {void}
6711
+ */
6712
+ closestElement(
6713
+ selector, // selector like in .closest()
6714
+ base = this, // extra functionality to skip a parent
6715
+ __Closest = (el, found = el && el.closest(selector)) =>
6716
+ !el || el === document || el === window
6717
+ ? null // standard .closest() returns null for non-found selectors also
6718
+ : found
6719
+ ? found // found a selector INside this element
6720
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
6721
+ ) {
6722
+ return __Closest(base);
6723
+ }
6724
+ /* eslint-enable jsdoc/require-param */
6725
+
6726
+ /**
6727
+ * 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.
6728
+ * @param {Object} elem - The element to check.
6729
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
6730
+ * @returns {void}
6731
+ */
6732
+ handleComponentTagRename(elem, tagName) {
6733
+ const tag = tagName.toLowerCase();
6734
+ const elemTag = elem.tagName.toLowerCase();
6735
+
6736
+ if (elemTag !== tag) {
6737
+ elem.setAttribute(tag, true);
6738
+ }
6739
+ }
6740
+
6741
+ /**
6742
+ * Validates if an element is a specific Auro component.
6743
+ * @param {Object} elem - The element to validate.
6744
+ * @param {String} tagName - The name of the Auro component to check against.
6745
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
6746
+ */
6747
+ elementMatch(elem, tagName) {
6748
+ const tag = tagName.toLowerCase();
6749
+ const elemTag = elem.tagName.toLowerCase();
6750
+
6751
+ return elemTag === tag || elem.hasAttribute(tag);
6752
+ }
6753
+ }
6754
+
6227
6755
  var styleCss$3 = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
6228
6756
 
6229
6757
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
@@ -6379,7 +6907,7 @@ class AuroBibtemplate extends LitElement {
6379
6907
 
6380
6908
  this.large = false;
6381
6909
 
6382
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
6910
+ AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
6383
6911
 
6384
6912
  const versioning = new AuroDependencyVersioning();
6385
6913
  this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -6418,7 +6946,7 @@ class AuroBibtemplate extends LitElement {
6418
6946
  *
6419
6947
  */
6420
6948
  static register(name = "auro-bibtemplate") {
6421
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroBibtemplate);
6949
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
6422
6950
  }
6423
6951
 
6424
6952
  /**
@@ -6458,6 +6986,18 @@ class AuroBibtemplate extends LitElement {
6458
6986
  this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
6459
6987
  }
6460
6988
 
6989
+ firstUpdated(changedProperties) {
6990
+ super.firstUpdated(changedProperties);
6991
+
6992
+ this.dispatchEvent(new CustomEvent("auro-bibtemplate-connected", {
6993
+ bubbles: true,
6994
+ composed: true,
6995
+ detail: {
6996
+ element: this
6997
+ }
6998
+ }));
6999
+ }
7000
+
6461
7001
  // function that renders the HTML and CSS into the scope of the component
6462
7002
  render() {
6463
7003
  return html$1`
@@ -6525,7 +7065,7 @@ class AuroCounterWrapper extends LitElement {
6525
7065
  * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
6526
7066
  */
6527
7067
  static register(name = "auro-counter-wrapper") {
6528
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounterWrapper);
7068
+ AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterWrapper);
6529
7069
  }
6530
7070
 
6531
7071
  // function that renders the HTML and CSS into the scope of the component
@@ -6979,7 +7519,7 @@ class AuroCounterGroup extends LitElement {
6979
7519
  * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
6980
7520
  */
6981
7521
  static register(name = "auro-counter-group") {
6982
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounterGroup);
7522
+ AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterGroup);
6983
7523
  }
6984
7524
 
6985
7525
  // function that renders the HTML and CSS into the scope of the component