@aurodesignsystem/auro-formkit 2.2.1-beta.2 → 2.2.1

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 (44) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/README.md +67 -67
  3. package/components/checkbox/README.md +1 -1
  4. package/components/checkbox/demo/readme.md +1 -1
  5. package/components/combobox/README.md +1 -1
  6. package/components/combobox/demo/api.min.js +352 -94
  7. package/components/combobox/demo/index.min.js +352 -94
  8. package/components/combobox/demo/readme.md +1 -1
  9. package/components/combobox/dist/index.js +352 -94
  10. package/components/combobox/dist/registered.js +352 -94
  11. package/components/counter/README.md +1 -1
  12. package/components/counter/demo/api.min.js +353 -95
  13. package/components/counter/demo/index.min.js +353 -95
  14. package/components/counter/demo/readme.md +1 -1
  15. package/components/counter/dist/index.js +353 -95
  16. package/components/counter/dist/registered.js +353 -95
  17. package/components/datepicker/README.md +1 -1
  18. package/components/datepicker/demo/api.min.js +466 -232
  19. package/components/datepicker/demo/index.min.js +466 -232
  20. package/components/datepicker/demo/readme.md +1 -1
  21. package/components/datepicker/dist/index.js +354 -114
  22. package/components/datepicker/dist/registered.js +354 -114
  23. package/components/dropdown/README.md +1 -1
  24. package/components/dropdown/demo/api.min.js +352 -94
  25. package/components/dropdown/demo/index.min.js +352 -94
  26. package/components/dropdown/demo/readme.md +1 -1
  27. package/components/dropdown/dist/auro-dropdown.d.ts +18 -0
  28. package/components/dropdown/dist/index.js +352 -94
  29. package/components/dropdown/dist/registered.js +352 -94
  30. package/components/form/README.md +1 -1
  31. package/components/form/demo/readme.md +1 -1
  32. package/components/input/README.md +1 -1
  33. package/components/input/demo/readme.md +1 -1
  34. package/components/menu/README.md +1 -1
  35. package/components/menu/demo/readme.md +1 -1
  36. package/components/radio/README.md +1 -1
  37. package/components/radio/demo/readme.md +1 -1
  38. package/components/select/README.md +1 -1
  39. package/components/select/demo/api.min.js +352 -94
  40. package/components/select/demo/index.min.js +352 -94
  41. package/components/select/demo/readme.md +1 -1
  42. package/components/select/dist/index.js +352 -94
  43. package/components/select/dist/registered.js +352 -94
  44. package/package.json +2 -2
@@ -7303,11 +7303,11 @@ var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;jus
7303
7303
 
7304
7304
  var colorCss$a = css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
7305
7305
 
7306
- var styleCss$9 = css`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([addSpace]) :host(:not([data-show])) .popover,:host(:not([data-show])) .popover,:host([disabled]) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.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}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0 !important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1*var(--ds-size-200, 1rem));left:calc(-1*var(--ds-size-75, 0.375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, 0.25rem);right:calc(-1*var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100, 0.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, 0.75rem);height:var(--ds-size-150, 0.75rem);content:""}`;
7306
+ var styleCss$9 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([addSpace]) :host(:not([data-show])) .popover,:host(:not([data-show])) .popover,:host([disabled]) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.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}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0 !important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1*var(--ds-size-200, 1rem));left:calc(-1*var(--ds-size-75, 0.375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, 0.25rem);right:calc(-1*var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100, 0.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, 0.75rem);height:var(--ds-size-150, 0.75rem);content:""}`;
7307
7307
 
7308
7308
  var colorCss$9 = css`::slotted(*){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}`;
7309
7309
 
7310
- var tokensCss$9 = css`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
7310
+ var tokensCss$9 = css`:host{--ds-auro-popover-boxshadow-color:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-popover-container-color:var(--ds-basic-color-surface-default, #ffffff);--ds-auro-popover-text-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
7311
7311
 
7312
7312
  var top = 'top';
7313
7313
  var bottom = 'bottom';
@@ -13759,17 +13759,70 @@ const computePosition = (reference, floating, options) => {
13759
13759
  /* eslint-disable line-comment-position, no-inline-comments */
13760
13760
 
13761
13761
 
13762
+
13763
+ const MAX_CONFIGURATION_COUNT = 10;
13764
+
13762
13765
  class AuroFloatingUI {
13763
- constructor() {
13766
+
13767
+ /**
13768
+ * @private
13769
+ */
13770
+ static isMousePressed = false;
13771
+
13772
+ /**
13773
+ * @private
13774
+ */
13775
+ static isMousePressHandlerInitialized = false;
13776
+
13777
+ /**
13778
+ * @private
13779
+ */
13780
+ static setupMousePressChecker() {
13781
+ if (!AuroFloatingUI.isMousePressHandlerInitialized && window && window.addEventListener) {
13782
+ AuroFloatingUI.isMousePressHandlerInitialized = true;
13783
+
13784
+ const mouseEventGlobalHandler = (event) => {
13785
+ AuroFloatingUI.isMousePressed = event.type === 'mousedown';
13786
+ };
13787
+
13788
+ window.addEventListener('mousedown', mouseEventGlobalHandler);
13789
+ window.addEventListener('mouseup', mouseEventGlobalHandler);
13790
+ }
13791
+ }
13792
+
13793
+ constructor(element, behavior) {
13794
+ this.element = element;
13795
+ this.behavior = behavior;
13796
+
13764
13797
  // Store event listener references for cleanup
13765
13798
  this.focusHandler = null;
13766
13799
  this.clickHandler = null;
13767
13800
  this.keyDownHandler = null;
13768
-
13801
+
13802
+ /**
13803
+ * @private
13804
+ */
13805
+ this.configureTrial = 0;
13806
+
13769
13807
  /**
13770
13808
  * @private
13771
13809
  */
13772
13810
  this.eventPrefix = undefined;
13811
+
13812
+ /**
13813
+ * @private
13814
+ */
13815
+ this.id = undefined;
13816
+
13817
+ /**
13818
+ * @private
13819
+ */
13820
+ this.showing = false;
13821
+
13822
+ /**
13823
+ * @private
13824
+ */
13825
+ this.strategy = undefined;
13773
13826
  }
13774
13827
 
13775
13828
  /**
@@ -13797,29 +13850,48 @@ class AuroFloatingUI {
13797
13850
  * @private
13798
13851
  * Determines the positioning strategy based on the current viewport size and mobile breakpoint.
13799
13852
  *
13800
- * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
13853
+ * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
13801
13854
  * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
13802
13855
  *
13803
- * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'.
13856
+ * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
13804
13857
  */
13805
13858
  getPositioningStrategy() {
13806
- let strategy = 'floating';
13807
- if (this.element.bib.mobileFullscreenBreakpoint) {
13808
- const smallerThanBreakpoint = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
13809
- if (smallerThanBreakpoint) {
13810
- strategy = 'fullscreen';
13811
- }
13859
+ const breakpoint = this.element.bib.mobileFullscreenBreakpoint || this.element.floaterConfig?.fullscreenBreakpoint;
13860
+ switch (this.behavior) {
13861
+ case "tooltip":
13862
+ return "floating";
13863
+ case "dialog":
13864
+ case "drawer":
13865
+ if (breakpoint) {
13866
+ const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
13867
+
13868
+ this.element.expanded = smallerThanBreakpoint;
13869
+ }
13870
+ if (this.element.nested) {
13871
+ return "cover";
13872
+ }
13873
+ return 'fullscreen';
13874
+ case "dropdown":
13875
+ case undefined:
13876
+ case null:
13877
+ if (breakpoint) {
13878
+ const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
13879
+ if (smallerThanBreakpoint) {
13880
+ return 'fullscreen';
13881
+ }
13882
+ }
13883
+ return "floating";
13884
+ default:
13885
+ return this.behavior;
13812
13886
  }
13813
-
13814
- return strategy;
13815
13887
  }
13816
13888
 
13817
13889
  /**
13818
13890
  * @private
13819
13891
  * Positions the bib element based on the current configuration and positioning strategy.
13820
13892
  *
13821
- * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
13822
- * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
13893
+ * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
13894
+ * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
13823
13895
  * and applies the calculated position to the bib's style.
13824
13896
  */
13825
13897
  position() {
@@ -13830,21 +13902,33 @@ class AuroFloatingUI {
13830
13902
  this.mirrorSize();
13831
13903
  // Define the middlware for the floater configuration
13832
13904
  const middleware = [
13833
- offset(this.element.floaterConfig.offset || 0),
13834
- ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled
13835
- ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled
13905
+ offset(this.element.floaterConfig?.offset || 0),
13906
+ ...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
13907
+ ...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
13836
13908
  ];
13837
13909
 
13838
13910
  // Compute the position of the bib
13839
13911
  computePosition(this.element.trigger, this.element.bib, {
13840
- placement: this.element.floaterConfig.placement || 'bottom',
13912
+ placement: this.element.floaterConfig?.placement,
13841
13913
  middleware: middleware || []
13842
- }).then(({x, y}) => { // eslint-disable-line id-length
13914
+ }).then(({ x, y }) => { // eslint-disable-line id-length
13843
13915
  Object.assign(this.element.bib.style, {
13844
13916
  left: `${x}px`,
13845
13917
  top: `${y}px`,
13846
13918
  });
13847
13919
  });
13920
+ } else if (strategy === 'cover') {
13921
+ // Compute the position of the bib
13922
+ computePosition(this.element.parentNode, this.element.bib, {
13923
+ placement: 'bottom-start'
13924
+ }).then(({ x, y }) => { // eslint-disable-line id-length
13925
+ Object.assign(this.element.bib.style, {
13926
+ left: `${x}px`,
13927
+ top: `${y - this.element.parentNode.offsetHeight}px`,
13928
+ width: `${this.element.parentNode.offsetWidth}px`,
13929
+ height: `${this.element.parentNode.offsetHeight}px`
13930
+ });
13931
+ });
13848
13932
  }
13849
13933
  }
13850
13934
 
@@ -13873,34 +13957,48 @@ class AuroFloatingUI {
13873
13957
  *
13874
13958
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
13875
13959
  */
13876
- configureBibStrategy(strategy) {
13877
- const prevStrategy = this.element.isBibFullscreen ? 'fullscreen' : 'floating';
13878
- if (strategy === 'fullscreen') {
13960
+ configureBibStrategy(value) {
13961
+ if (value === 'fullscreen') {
13879
13962
  this.element.isBibFullscreen = true;
13880
13963
  // reset the prev position
13964
+ this.element.bib.setAttribute('isfullscreen', "");
13965
+ this.element.bib.style.position = 'fixed';
13881
13966
  this.element.bib.style.top = "0px";
13882
13967
  this.element.bib.style.left = "0px";
13968
+ this.element.bib.style.width = '';
13969
+ this.element.bib.style.height = '';
13883
13970
 
13884
13971
  // reset the size that was mirroring `size` css-part
13885
13972
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
13886
- bibContent.style.width = '';
13887
- bibContent.style.height = '';
13888
- bibContent.style.maxWidth = '';
13889
- bibContent.style.maxHeight = `${window.visualViewport.height}px`;
13973
+ if (bibContent) {
13974
+ bibContent.style.width = '';
13975
+ bibContent.style.height = '';
13976
+ bibContent.style.maxWidth = '';
13977
+ bibContent.style.maxHeight = `${window.visualViewport.height}px`;
13978
+ this.configureTrial = 0;
13979
+ } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
13980
+ this.configureTrial += 1;
13981
+
13982
+ setTimeout(() => {
13983
+ this.configureBibStrategy(value);
13984
+ }, 0);
13985
+ }
13890
13986
 
13891
13987
  if (this.element.isPopoverVisible) {
13892
13988
  this.lockScroll(true);
13893
13989
  }
13894
13990
  } else {
13991
+ this.element.bib.style.position = '';
13992
+ this.element.bib.removeAttribute('isfullscreen');
13895
13993
  this.element.isBibFullscreen = false;
13896
-
13897
- this.lockScroll(false);
13898
13994
  }
13899
13995
 
13900
- if (prevStrategy !== strategy) {
13996
+ const isChanged = this.strategy && this.strategy !== value;
13997
+ this.strategy = value;
13998
+ if (isChanged) {
13901
13999
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
13902
14000
  detail: {
13903
- strategy,
14001
+ value,
13904
14002
  },
13905
14003
  composed: true
13906
14004
  });
@@ -13911,18 +14009,6 @@ class AuroFloatingUI {
13911
14009
 
13912
14010
  updateState() {
13913
14011
  const isVisible = this.element.isPopoverVisible;
13914
-
13915
- // Refactor this to apply attribute to correct focusable element
13916
- // Reference Issue: https://github.com/AlaskaAirlines/auro-library/issues/105
13917
- //
13918
- // this.element.trigger.setAttribute('aria-expanded', isVisible);
13919
-
13920
- if (isVisible) {
13921
- this.element.bib.setAttribute('data-show', true);
13922
- } else {
13923
- this.element.bib.removeAttribute('data-show');
13924
- }
13925
-
13926
14012
  if (!isVisible) {
13927
14013
  this.cleanupHideHandlers();
13928
14014
  try {
@@ -13933,16 +14019,32 @@ class AuroFloatingUI {
13933
14019
  }
13934
14020
  }
13935
14021
 
14022
+ /**
14023
+ * @private
14024
+ * getting called on 'blur' in trigger or `focusin` in document
14025
+ *
14026
+ * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
14027
+ * This method checks if the currently active element is still within the trigger or bib.
14028
+ * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
14029
+ */
13936
14030
  handleFocusLoss() {
13937
- if (this.element.noHideOnThisFocusLoss ||
13938
- this.element.hasAttribute('noHideOnThisFocusLoss')) {
14031
+ // if mouse is being pressed, skip and let click event to handle the action
14032
+ if (AuroFloatingUI.isMousePressed) {
13939
14033
  return;
13940
14034
  }
13941
14035
 
13942
- const {activeElement} = document;
13943
- if (activeElement === document.querySelector('body') ||
13944
- this.element.contains(activeElement) ||
13945
- this.element.bibContent?.contains(activeElement)) {
14036
+ if (this.element.noHideOnThisFocusLoss ||
14037
+ this.element.hasAttribute('noHideOnThisFocusLoss')) {
14038
+ return;
14039
+ }
14040
+
14041
+ const { activeElement } = document;
14042
+ // if focus is still inside of trigger or bib, do not close
14043
+ if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
14044
+ return;
14045
+ }
14046
+ // if fullscreen bib is still open and the focus is missing, do not close
14047
+ if (this.element.bib.hasAttribute('isfullscreen') && activeElement === document.body) {
13946
14048
  return;
13947
14049
  }
13948
14050
 
@@ -13950,31 +14052,66 @@ class AuroFloatingUI {
13950
14052
  }
13951
14053
 
13952
14054
  setupHideHandlers() {
14055
+ this.preventFocusLoseOnBibClick = (event) => {
14056
+ event.preventDefault();
14057
+ event.stopPropagation();
14058
+ };
14059
+ this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
14060
+
13953
14061
  // Define handlers & store references
13954
14062
  this.focusHandler = () => this.handleFocusLoss();
13955
14063
 
13956
14064
  this.clickHandler = (evt) => {
13957
- if (!evt.composedPath().includes(this.element.trigger) &&
13958
- !evt.composedPath().includes(this.element.bibContent)) {
13959
- this.hideBib();
14065
+ if ((!evt.composedPath().includes(this.element.trigger) &&
14066
+ !evt.composedPath().includes(this.element.bib)) ||
14067
+ (this.element.bib.backdrop && evt.composedPath().includes(this.element.bib.backdrop))) {
14068
+ const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
14069
+
14070
+ if (existedVisibleFloatingUI && existedVisibleFloatingUI.element.isPopoverVisible) {
14071
+ // if something else is open, close that
14072
+ existedVisibleFloatingUI.hideBib();
14073
+ document.expandedAuroFormkitDropdown = null;
14074
+ document.expandedAuroFloater = this;
14075
+ } else {
14076
+ this.hideBib();
14077
+ }
13960
14078
  }
13961
14079
  };
13962
14080
 
13963
14081
  // ESC key handler
13964
14082
  this.keyDownHandler = (evt) => {
13965
14083
  if (evt.key === 'Escape' && this.element.isPopoverVisible) {
14084
+ const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
14085
+ if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this && existedVisibleFloatingUI.element.isPopoverVisible) {
14086
+ // if something else is open, let it handle itself
14087
+ return;
14088
+ }
13966
14089
  this.hideBib();
13967
14090
  }
13968
14091
  };
13969
14092
 
13970
- // Add event listeners using the stored references
13971
- document.addEventListener('focusin', this.focusHandler);
13972
- window.addEventListener('click', this.clickHandler);
14093
+ if (this.behavior !== 'drawer' && this.behavior !== 'dialog') {
14094
+ // Add event listeners using the stored references
14095
+ document.addEventListener('focusin', this.focusHandler);
14096
+ }
14097
+
13973
14098
  document.addEventListener('keydown', this.keyDownHandler);
14099
+
14100
+ // send this task to the end of queue to prevent conflicting
14101
+ // it conflicts if showBib gets call from a button that's not this.element.trigger
14102
+ setTimeout(() => {
14103
+ window.addEventListener('click', this.clickHandler);
14104
+ }, 0);
13974
14105
  }
13975
14106
 
13976
14107
  cleanupHideHandlers() {
13977
14108
  // Remove event listeners if they exist
14109
+
14110
+ if (this.preventFocusLoseOnBibClick) {
14111
+ this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
14112
+ delete this.preventFocusLoseOnBibClick;
14113
+ }
14114
+
13978
14115
  if (this.focusHandler) {
13979
14116
  document.removeEventListener('focusin', this.focusHandler);
13980
14117
  this.focusHandler = null;
@@ -13999,40 +14136,54 @@ class AuroFloatingUI {
13999
14136
 
14000
14137
  updateCurrentExpandedDropdown() {
14001
14138
  // Close any other dropdown that is already open
14002
- if (document.expandedAuroFormkitDropdown) {
14003
- document.expandedAuroFormkitDropdown.hide;
14139
+ const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
14140
+ if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this &&
14141
+ existedVisibleFloatingUI.isPopoverVisible &&
14142
+ document.expandedAuroFloater.eventPrefix === this.eventPrefix) {
14143
+ document.expandedAuroFloater.hideBib();
14004
14144
  }
14005
14145
 
14006
- document.expandedAuroFormkitDropdown = this;
14146
+ document.expandedAuroFloater = this;
14007
14147
  }
14008
14148
 
14009
14149
  showBib() {
14010
- if (!this.element.disabled && !this.element.isPopoverVisible) {
14150
+ if (!this.element.disabled && !this.showing) {
14011
14151
  this.updateCurrentExpandedDropdown();
14012
- this.element.isPopoverVisible = true;
14013
14152
  this.element.triggerChevron?.setAttribute('data-expanded', true);
14014
-
14015
- this.dispatchEventDropdownToggle();
14016
- this.position();
14017
-
14018
- // Clean up any existing handlers before setting up new ones
14019
- this.cleanupHideHandlers();
14020
- this.setupHideHandlers();
14153
+
14154
+ // prevent double showing: isPopovervisible gets first and showBib gets called later
14155
+ if (!this.showing) {
14156
+ if (!this.element.modal) {
14157
+ this.setupHideHandlers();
14158
+ }
14159
+ this.showing = true;
14160
+ this.element.isPopoverVisible = true;
14161
+ this.position();
14162
+ this.dispatchEventDropdownToggle();
14163
+ }
14021
14164
 
14022
14165
  // Setup auto update to handle resize and scroll
14023
- this.element.cleanup = autoUpdate(this.element.trigger, this.element.bib, () => {
14166
+ this.element.cleanup = autoUpdate(this.element.trigger || this.element.parentNode, this.element.bib, () => {
14024
14167
  this.position();
14025
14168
  });
14026
14169
  }
14027
14170
  }
14028
14171
 
14029
14172
  hideBib() {
14030
- if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
14031
- this.element.isPopoverVisible = false;
14173
+ if (!this.element.disabled && !this.element.noToggle) {
14032
14174
  this.lockScroll(false);
14033
14175
  this.element.triggerChevron?.removeAttribute('data-expanded');
14034
- this.dispatchEventDropdownToggle();
14176
+
14177
+ if (this.element.isPopoverVisible) {
14178
+ this.element.isPopoverVisible = false;
14179
+ }
14180
+ if (this.showing) {
14181
+ this.cleanupHideHandlers();
14182
+ this.showing = false;
14183
+ this.dispatchEventDropdownToggle();
14184
+ }
14035
14185
  }
14186
+ document.expandedAuroFloater = null;
14036
14187
  }
14037
14188
 
14038
14189
  /**
@@ -14042,7 +14193,7 @@ class AuroFloatingUI {
14042
14193
  dispatchEventDropdownToggle() {
14043
14194
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
14044
14195
  detail: {
14045
- expanded: this.element.isPopoverVisible,
14196
+ expanded: this.showing,
14046
14197
  },
14047
14198
  composed: true
14048
14199
  });
@@ -14090,15 +14241,18 @@ class AuroFloatingUI {
14090
14241
  break;
14091
14242
  case 'focus':
14092
14243
  if (this.element.focusShow) {
14244
+
14093
14245
  /*
14094
- This needs to better handle clicking that gives focus -
14095
- currently it shows and then immediately hides the bib
14246
+ This needs to better handle clicking that gives focus -
14247
+ currently it shows and then immediately hides the bib
14096
14248
  */
14097
14249
  this.showBib();
14098
14250
  }
14099
14251
  break;
14100
14252
  case 'blur':
14101
- this.handleFocusLoss();
14253
+ // send this task 100ms later queue to
14254
+ // wait a frame in case focus moves within the floating element/bib
14255
+ setTimeout(() => this.handleFocusLoss(), 0);
14102
14256
  break;
14103
14257
  case 'click':
14104
14258
  if (document.activeElement === document.body) {
@@ -14106,7 +14260,7 @@ class AuroFloatingUI {
14106
14260
  }
14107
14261
  this.handleClick();
14108
14262
  break;
14109
- // Do nothing
14263
+ // Do nothing
14110
14264
  }
14111
14265
  }
14112
14266
  }
@@ -14150,39 +14304,79 @@ class AuroFloatingUI {
14150
14304
  });
14151
14305
  }
14152
14306
 
14307
+ /**
14308
+ *
14309
+ * @param {*} eventPrefix
14310
+ */
14311
+ regenerateBibId() {
14312
+ this.id = this.element.getAttribute('id');
14313
+ if (!this.id) {
14314
+ this.id = window.crypto.randomUUID();
14315
+ this.element.setAttribute('id', this.id);
14316
+ }
14317
+
14318
+ this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
14319
+ }
14320
+
14153
14321
  configure(elem, eventPrefix) {
14322
+ AuroFloatingUI.setupMousePressChecker();
14323
+
14154
14324
  this.eventPrefix = eventPrefix;
14155
- this.element = elem;
14156
- this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
14157
- this.element.bib = this.element.shadowRoot.querySelector('#bib');
14325
+ if (this.element !== elem) {
14326
+ this.element = elem;
14327
+ }
14328
+
14329
+ if (this.behavior !== this.element.behavior) {
14330
+ this.behavior = this.element.behavior;
14331
+ }
14332
+
14333
+ if (this.element.trigger) {
14334
+ this.disconnect();
14335
+ }
14336
+ this.element.trigger = this.element.triggerElement || this.element.shadowRoot.querySelector('#trigger') || this.element.trigger;
14337
+ this.element.bib = this.element.shadowRoot.querySelector('#bib') || this.element.bib;
14158
14338
  this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');
14159
14339
  this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon');
14160
14340
 
14341
+
14342
+ if (this.element.floaterConfig) {
14343
+ this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
14344
+ }
14345
+
14161
14346
  document.body.append(this.element.bib);
14162
14347
 
14348
+ this.regenerateBibId();
14163
14349
  this.handleTriggerTabIndex();
14164
14350
 
14165
14351
  this.handleEvent = this.handleEvent.bind(this);
14166
- this.element.trigger.addEventListener('keydown', this.handleEvent);
14167
- this.element.trigger.addEventListener('click', this.handleEvent);
14168
- this.element.trigger.addEventListener('mouseenter', this.handleEvent);
14169
- this.element.trigger.addEventListener('mouseleave', this.handleEvent);
14170
- this.element.trigger.addEventListener('focus', this.handleEvent);
14171
- this.element.trigger.addEventListener('blur', this.handleEvent);
14352
+ if (this.element.trigger) {
14353
+ this.element.trigger.addEventListener('keydown', this.handleEvent);
14354
+ this.element.trigger.addEventListener('click', this.handleEvent);
14355
+ this.element.trigger.addEventListener('mouseenter', this.handleEvent);
14356
+ this.element.trigger.addEventListener('mouseleave', this.handleEvent);
14357
+ this.element.trigger.addEventListener('focus', this.handleEvent);
14358
+ this.element.trigger.addEventListener('blur', this.handleEvent);
14359
+ }
14172
14360
  }
14173
14361
 
14174
14362
  disconnect() {
14175
14363
  this.cleanupHideHandlers();
14176
- this.element.cleanup?.();
14177
-
14178
- // Remove event & keyboard listeners
14179
- if (this.element?.trigger) {
14180
- this.element.trigger.removeEventListener('keydown', this.handleEvent);
14181
- this.element.trigger.removeEventListener('click', this.handleEvent);
14182
- this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
14183
- this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
14184
- this.element.trigger.removeEventListener('focus', this.handleEvent);
14185
- this.element.trigger.removeEventListener('blur', this.handleEvent);
14364
+ if (this.element) {
14365
+ this.element.cleanup?.();
14366
+
14367
+ if (this.element.bib) {
14368
+ this.element.shadowRoot.append(this.element.bib);
14369
+ }
14370
+
14371
+ // Remove event & keyboard listeners
14372
+ if (this.element?.trigger) {
14373
+ this.element.trigger.removeEventListener('keydown', this.handleEvent);
14374
+ this.element.trigger.removeEventListener('click', this.handleEvent);
14375
+ this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
14376
+ this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
14377
+ this.element.trigger.removeEventListener('focus', this.handleEvent);
14378
+ this.element.trigger.removeEventListener('blur', this.handleEvent);
14379
+ }
14186
14380
  }
14187
14381
  }
14188
14382
  }
@@ -15145,6 +15339,11 @@ class AuroDropdown extends LitElement {
15145
15339
  * @private
15146
15340
  */
15147
15341
  this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion$1, AuroHelpText$1);
15342
+
15343
+ /**
15344
+ * @private
15345
+ */
15346
+ this.bindFocusEventToTrigger = this.bindFocusEventToTrigger.bind(this);
15148
15347
  }
15149
15348
 
15150
15349
  /**
@@ -15413,6 +15612,7 @@ class AuroDropdown extends LitElement {
15413
15612
  disconnectedCallback() {
15414
15613
  super.disconnectedCallback();
15415
15614
  this.floater.disconnect();
15615
+ this.clearTriggerFocusEventBinding();
15416
15616
  }
15417
15617
 
15418
15618
  updated(changedProperties) {
@@ -15527,6 +15727,62 @@ class AuroDropdown extends LitElement {
15527
15727
  return result;
15528
15728
  }
15529
15729
 
15730
+ /**
15731
+ * @private
15732
+ * Creates and dispatches a duplicate focus event on the trigger element.
15733
+ * @param {Event} event - The original focus event.
15734
+ */
15735
+ bindFocusEventToTrigger(event) {
15736
+ const dupEvent = new FocusEvent(event.type, {
15737
+ bubbles: false,
15738
+ cancelable: false,
15739
+ composed: true,
15740
+ });
15741
+ this.trigger.dispatchEvent(dupEvent);
15742
+ }
15743
+
15744
+ /**
15745
+ * @private
15746
+ * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
15747
+ * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
15748
+ */
15749
+ setupTriggerFocusEventBinding() {
15750
+ if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
15751
+ return;
15752
+ }
15753
+
15754
+ this.triggerContentSlot.forEach((node) => {
15755
+ if (node.querySelectorAll) {
15756
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
15757
+ auroElements.forEach((auroEl) => {
15758
+ auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
15759
+ auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
15760
+ });
15761
+ }
15762
+ });
15763
+ }
15764
+
15765
+ /**
15766
+ * Clears focus and blur event listeners from nested Auro components within the trigger slot.
15767
+ * @private
15768
+ * @returns {void}
15769
+ */
15770
+ clearTriggerFocusEventBinding() {
15771
+ if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
15772
+ return;
15773
+ }
15774
+
15775
+ this.triggerContentSlot.forEach((node) => {
15776
+ if (node.querySelectorAll) {
15777
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
15778
+ auroElements.forEach((auroEl) => {
15779
+ auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
15780
+ auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
15781
+ });
15782
+ }
15783
+ });
15784
+ }
15785
+
15530
15786
  /**
15531
15787
  * Handles changes to the trigger content slot and updates related properties.
15532
15788
  *
@@ -15574,6 +15830,7 @@ class AuroDropdown extends LitElement {
15574
15830
  }
15575
15831
 
15576
15832
  if (this.triggerContentSlot) {
15833
+ this.setupTriggerFocusEventBinding();
15577
15834
  this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
15578
15835
  if (slot.textContent.trim()) {
15579
15836
  return true;
@@ -15679,6 +15936,7 @@ class AuroDropdown extends LitElement {
15679
15936
  <${this.dropdownBibTag}
15680
15937
  id="bib"
15681
15938
  role="tooltip"
15939
+ ?data-show="${this.isPopoverVisible}"
15682
15940
  ?isfullscreen="${this.isBibFullscreen}"
15683
15941
  ?common="${this.common}"
15684
15942
  ?rounded="${this.common || this.rounded}"
@@ -23183,23 +23441,6 @@ class AuroDatePicker extends LitElement {
23183
23441
  }
23184
23442
  });
23185
23443
 
23186
- // Close the datepicker when clicking outside it
23187
- document.addEventListener('click', (evt) => {
23188
- if (!evt.composedPath().includes(this) &&
23189
- !evt.composedPath().includes(this.dropdown.bibContent) &&
23190
- this.dropdown.isPopoverVisible) {
23191
- this.dropdown.hide();
23192
- }
23193
- });
23194
-
23195
- document.activeElement.addEventListener('focusin', () => {
23196
- if (document.activeElement !== document.querySelector('body') &&
23197
- !this.contains(document.activeElement) &&
23198
- !this.dropdown.bibContent.contains(document.activeElement)) {
23199
- this.dropdown.hide();
23200
- }
23201
- });
23202
-
23203
23444
  if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
23204
23445
  this.calendar.dateFrom = new Date(this.formattedValue).getTime();
23205
23446
  }
@@ -23555,7 +23796,6 @@ class AuroDatePicker extends LitElement {
23555
23796
  ?disabled="${this.disabled}"
23556
23797
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
23557
23798
  disableEventShow
23558
- noHideOnThisFocusLoss
23559
23799
  fullscreenBreakpoint="sm"
23560
23800
  .placement="${this.placement}"
23561
23801
  .offset="${this.offset}"