@aurodesignsystem/auro-formkit 5.1.0-rc-1176.1 → 5.1.0-rc-1195.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 (37) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/components/checkbox/demo/api.min.js +66 -2
  3. package/components/checkbox/demo/index.min.js +66 -2
  4. package/components/checkbox/dist/index.js +66 -2
  5. package/components/checkbox/dist/registered.js +66 -2
  6. package/components/combobox/demo/api.md +230 -38
  7. package/components/combobox/demo/api.min.js +155 -6
  8. package/components/combobox/demo/index.md +104 -0
  9. package/components/combobox/demo/index.min.js +155 -6
  10. package/components/combobox/dist/auro-combobox.d.ts +18 -1
  11. package/components/combobox/dist/index.js +155 -6
  12. package/components/combobox/dist/registered.js +155 -6
  13. package/components/counter/demo/api.min.js +69 -5
  14. package/components/counter/demo/index.min.js +69 -5
  15. package/components/counter/dist/index.js +69 -5
  16. package/components/counter/dist/registered.js +69 -5
  17. package/components/datepicker/demo/api.md +40 -0
  18. package/components/datepicker/demo/api.min.js +173 -10
  19. package/components/datepicker/demo/index.min.js +173 -10
  20. package/components/datepicker/dist/auro-calendar-cell.d.ts +6 -0
  21. package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
  22. package/components/datepicker/dist/index.js +173 -10
  23. package/components/datepicker/dist/registered.js +173 -10
  24. package/components/input/demo/api.min.js +67 -3
  25. package/components/input/demo/index.min.js +67 -3
  26. package/components/input/dist/index.js +67 -3
  27. package/components/input/dist/registered.js +67 -3
  28. package/components/radio/demo/api.min.js +97 -5
  29. package/components/radio/demo/index.min.js +97 -5
  30. package/components/radio/dist/auro-radio-group.d.ts +14 -0
  31. package/components/radio/dist/index.js +97 -5
  32. package/components/radio/dist/registered.js +97 -5
  33. package/components/select/demo/api.min.js +67 -3
  34. package/components/select/demo/index.min.js +67 -3
  35. package/components/select/dist/index.js +67 -3
  36. package/components/select/dist/registered.js +67 -3
  37. package/package.json +1 -1
@@ -22,7 +22,7 @@ var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout
22
22
 
23
23
  var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
24
24
 
25
- var snowflakeStyleCss = css`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-dropdown-emphasized-background: #00274A1a;--ds-advanced-color-dropdown-emphasized-background-hover: #00274A33;--ds-advanced-color-expanded-widget-background: #00274a;--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #676767;--ds-advanced-color-shared-emphasized-background: rgba(1, 66, 106, 0.1);--ds-advanced-color-shared-emphasized-background-hover: rgba(1, 66, 106, 0.2);--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ffffff;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT";--ds-basic-type-family-accent-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular";--ds-basic-type-family-body-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular";--ds-basic-type-family-display-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular";--ds-basic-type-family-heading-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.625rem;--ds-basic-type-line-height-body2: 1.5rem;--ds-basic-type-line-height-body3: 1.25rem;--ds-basic-type-line-height-body4: 1rem;--ds-basic-type-line-height-body5: 0.875rem;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-200, 1rem)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-block-start:var(--ds-size-50, 0.25rem)}.layout-snowflake input{transition:all 1ms linear;text-align:center}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-200, 1rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
25
+ var snowflakeStyleCss = css`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-dropdown-emphasized-background: #00274A1a;--ds-advanced-color-dropdown-emphasized-background-hover: #00274A33;--ds-advanced-color-expanded-widget-background: #00274a;--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #676767;--ds-advanced-color-shared-emphasized-background: rgba(1, 66, 106, 0.1);--ds-advanced-color-shared-emphasized-background-hover: rgba(1, 66, 106, 0.2);--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ffffff;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT";--ds-basic-type-family-accent-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular";--ds-basic-type-family-body-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular";--ds-basic-type-family-display-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular";--ds-basic-type-family-heading-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.625rem;--ds-basic-type-line-height-body2: 1.5rem;--ds-basic-type-line-height-body3: 1.25rem;--ds-basic-type-line-height-body4: 1rem;--ds-basic-type-line-height-body5: 0.875rem;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-200, 1rem)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-block-start:var(--ds-size-50, 0.25rem)}.layout-snowflake input{transition:all 1ms linear;text-align:center}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake.withValue:hover .alertNotification{display:none}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-200, 1rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
26
26
 
27
27
  const watchedItems = new Set();
28
28
 
@@ -4579,6 +4579,52 @@ class AuroFormValidation {
4579
4579
  message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
4580
4580
  }
4581
4581
  ]
4582
+ },
4583
+ combobox: {
4584
+ filter: [
4585
+ {
4586
+ check: (e) => {
4587
+
4588
+ // Guard Clause: If the behavior is not 'filter', skip this validation
4589
+ if (e.behavior !== 'filter') return false;
4590
+
4591
+ // Get the current input value
4592
+ const currentInputValue = e.input.value;
4593
+
4594
+ // Skip validation if the input has no value
4595
+ if (!currentInputValue) return false;
4596
+
4597
+ /**
4598
+ * Let's check if the option selected and combobox value match.
4599
+ */
4600
+
4601
+ // Guard Clause: If there is no option selected fail the validation
4602
+ if (!e.optionSelected) return true;
4603
+
4604
+ // Guard Clause: If there is no value fail the validation
4605
+ if (!e.value) return true;
4606
+
4607
+ // Guard Clause: If the selected option's value doesn't match the input value fail the validation
4608
+ if (e.optionSelected.value !== e.value) return true;
4609
+
4610
+ /**
4611
+ * Now let's make sure the user hasn't change the value in the input after selecting an option.
4612
+ * This is to make sure there's no user confusion if they select an option but then change the value to something else.
4613
+ */
4614
+
4615
+ // Guard Clause: If the current input value doesn't match the option selected value fail the validation
4616
+ if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
4617
+
4618
+ // Guard Clause: If the current input value doesn't match the combobox value fail the validation
4619
+ if (currentInputValue && currentInputValue !== e.value) return true;
4620
+
4621
+ // If all the checks passed the validation passes
4622
+ return false;
4623
+ },
4624
+ validity: 'valueMissing',
4625
+ message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
4626
+ }
4627
+ ]
4582
4628
  }
4583
4629
  };
4584
4630
 
@@ -4587,6 +4633,8 @@ class AuroFormValidation {
4587
4633
  elementType = 'input';
4588
4634
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
4589
4635
  elementType = 'counter';
4636
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
4637
+ elementType = 'combobox';
4590
4638
  }
4591
4639
 
4592
4640
  if (elementType) {
@@ -4773,6 +4821,15 @@ class AuroFormValidation {
4773
4821
  }
4774
4822
  }
4775
4823
 
4824
+ const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
4825
+
4826
+ if (isCombobox) {
4827
+
4828
+ if (!elem.persistInput || elem.behavior === "filter") {
4829
+ hasValue = elem.input.value?.length > 0;
4830
+ }
4831
+ }
4832
+
4776
4833
  if (!hasValue && elem.required && elem.touched) {
4777
4834
  elem.validity = 'valueMissing';
4778
4835
  elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -4781,6 +4838,11 @@ class AuroFormValidation {
4781
4838
  this.validateElementAttributes(elem);
4782
4839
  } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
4783
4840
  this.validateElementAttributes(elem);
4841
+ } else if (isCombobox) {
4842
+ this.validateElementAttributes(elem);
4843
+
4844
+ // Don't run extra validation for cases where the combobox is not being used as a filter
4845
+ validationShouldRun = elem.behavior !== 'filter';
4784
4846
  }
4785
4847
  }
4786
4848
 
@@ -4788,8 +4850,8 @@ class AuroFormValidation {
4788
4850
 
4789
4851
  const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
4790
4852
 
4791
- // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
4792
- if (!isCombobox || isCombobox && !elem.persistValue) {
4853
+ // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
4854
+ if (!isCombobox || isCombobox && !elem.persistInput) {
4793
4855
 
4794
4856
  // run validation on all inputs since we're going to use them to set the validity of this component
4795
4857
  this.auroInputElements.forEach(input => input.validate());
@@ -4862,6 +4924,8 @@ class AuroFormValidation {
4862
4924
  if (input.validationMessage.length > 0) {
4863
4925
  elem.errorMessage = input.validationMessage;
4864
4926
  }
4927
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
4928
+ elem.errorMessage = elem.input?.inputElement?.validationMessage;
4865
4929
  } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
4866
4930
  const firstInput = this.inputElements[0];
4867
4931
 
@@ -466,7 +466,7 @@ class AuroRadio extends i$2 {
466
466
  */
467
467
  const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
468
468
 
469
- var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
469
+ var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
470
470
 
471
471
  var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
472
472
 
@@ -975,6 +975,52 @@ class AuroFormValidation {
975
975
  message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
976
976
  }
977
977
  ]
978
+ },
979
+ combobox: {
980
+ filter: [
981
+ {
982
+ check: (e) => {
983
+
984
+ // Guard Clause: If the behavior is not 'filter', skip this validation
985
+ if (e.behavior !== 'filter') return false;
986
+
987
+ // Get the current input value
988
+ const currentInputValue = e.input.value;
989
+
990
+ // Skip validation if the input has no value
991
+ if (!currentInputValue) return false;
992
+
993
+ /**
994
+ * Let's check if the option selected and combobox value match.
995
+ */
996
+
997
+ // Guard Clause: If there is no option selected fail the validation
998
+ if (!e.optionSelected) return true;
999
+
1000
+ // Guard Clause: If there is no value fail the validation
1001
+ if (!e.value) return true;
1002
+
1003
+ // Guard Clause: If the selected option's value doesn't match the input value fail the validation
1004
+ if (e.optionSelected.value !== e.value) return true;
1005
+
1006
+ /**
1007
+ * Now let's make sure the user hasn't change the value in the input after selecting an option.
1008
+ * This is to make sure there's no user confusion if they select an option but then change the value to something else.
1009
+ */
1010
+
1011
+ // Guard Clause: If the current input value doesn't match the option selected value fail the validation
1012
+ if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
1013
+
1014
+ // Guard Clause: If the current input value doesn't match the combobox value fail the validation
1015
+ if (currentInputValue && currentInputValue !== e.value) return true;
1016
+
1017
+ // If all the checks passed the validation passes
1018
+ return false;
1019
+ },
1020
+ validity: 'valueMissing',
1021
+ message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
1022
+ }
1023
+ ]
978
1024
  }
979
1025
  };
980
1026
 
@@ -983,6 +1029,8 @@ class AuroFormValidation {
983
1029
  elementType = 'input';
984
1030
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
985
1031
  elementType = 'counter';
1032
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
1033
+ elementType = 'combobox';
986
1034
  }
987
1035
 
988
1036
  if (elementType) {
@@ -1169,6 +1217,15 @@ class AuroFormValidation {
1169
1217
  }
1170
1218
  }
1171
1219
 
1220
+ const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
1221
+
1222
+ if (isCombobox) {
1223
+
1224
+ if (!elem.persistInput || elem.behavior === "filter") {
1225
+ hasValue = elem.input.value?.length > 0;
1226
+ }
1227
+ }
1228
+
1172
1229
  if (!hasValue && elem.required && elem.touched) {
1173
1230
  elem.validity = 'valueMissing';
1174
1231
  elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1177,6 +1234,11 @@ class AuroFormValidation {
1177
1234
  this.validateElementAttributes(elem);
1178
1235
  } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
1179
1236
  this.validateElementAttributes(elem);
1237
+ } else if (isCombobox) {
1238
+ this.validateElementAttributes(elem);
1239
+
1240
+ // Don't run extra validation for cases where the combobox is not being used as a filter
1241
+ validationShouldRun = elem.behavior !== 'filter';
1180
1242
  }
1181
1243
  }
1182
1244
 
@@ -1184,8 +1246,8 @@ class AuroFormValidation {
1184
1246
 
1185
1247
  const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
1186
1248
 
1187
- // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
1188
- if (!isCombobox || isCombobox && !elem.persistValue) {
1249
+ // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
1250
+ if (!isCombobox || isCombobox && !elem.persistInput) {
1189
1251
 
1190
1252
  // run validation on all inputs since we're going to use them to set the validity of this component
1191
1253
  this.auroInputElements.forEach(input => input.validate());
@@ -1258,6 +1320,8 @@ class AuroFormValidation {
1258
1320
  if (input.validationMessage.length > 0) {
1259
1321
  elem.errorMessage = input.validationMessage;
1260
1322
  }
1323
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
1324
+ elem.errorMessage = elem.input?.inputElement?.validationMessage;
1261
1325
  } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
1262
1326
  const firstInput = this.inputElements[0];
1263
1327
 
@@ -1586,6 +1650,7 @@ class AuroRadioGroup extends i$2 {
1586
1650
  this.optionSelected = undefined;
1587
1651
  this.onDark = false;
1588
1652
  this.touched = false;
1653
+ this.hasLegend = false;
1589
1654
 
1590
1655
  /**
1591
1656
  * @private
@@ -1690,6 +1755,18 @@ class AuroRadioGroup extends i$2 {
1690
1755
  type: Boolean,
1691
1756
  reflect: true,
1692
1757
  attribute: false
1758
+ },
1759
+
1760
+ /**
1761
+ * Indicates whether the legend slot is set or not.
1762
+ * @type {boolean}
1763
+ * @default false
1764
+ * @private
1765
+ */
1766
+ hasLegend: {
1767
+ type: Boolean,
1768
+ reflect: false,
1769
+ attribute: false
1693
1770
  }
1694
1771
  };
1695
1772
  }
@@ -1878,6 +1955,18 @@ class AuroRadioGroup extends i$2 {
1878
1955
  this.handleItems();
1879
1956
  }
1880
1957
 
1958
+ /**
1959
+ * Method for handling legend slot changes.
1960
+ * @private
1961
+ * @returns {void}
1962
+ */
1963
+ handleLegendSlotChange() {
1964
+ const slot = this.shadowRoot.querySelector('slot[name="legend"]');
1965
+ if (slot) {
1966
+ this.hasLegend = slot.assignedNodes().length > 0;
1967
+ }
1968
+ }
1969
+
1881
1970
  /**
1882
1971
  * Method for initializing the tab index of the checked radio input.
1883
1972
  * @private
@@ -1992,11 +2081,14 @@ class AuroRadioGroup extends i$2 {
1992
2081
  const groupClasses = {
1993
2082
  'displayFlex': this.horizontal && this.items.length <= this.max
1994
2083
  };
2084
+ const legendClasses = {
2085
+ 'hidden': !this.hasLegend && this.required
2086
+ };
1995
2087
 
1996
2088
  return u`
1997
2089
  <fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
1998
- <legend>
1999
- <slot name="legend"></slot>
2090
+ <legend class="${e(legendClasses)}">
2091
+ <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
2000
2092
  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
2001
2093
  </legend>
2002
2094
  <slot @slotchange=${this.handleSlotChange}></slot>
@@ -441,7 +441,7 @@ class AuroRadio extends i$2 {
441
441
  */
442
442
  const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
443
443
 
444
- var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
444
+ var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
445
445
 
446
446
  var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
447
447
 
@@ -950,6 +950,52 @@ class AuroFormValidation {
950
950
  message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
951
951
  }
952
952
  ]
953
+ },
954
+ combobox: {
955
+ filter: [
956
+ {
957
+ check: (e) => {
958
+
959
+ // Guard Clause: If the behavior is not 'filter', skip this validation
960
+ if (e.behavior !== 'filter') return false;
961
+
962
+ // Get the current input value
963
+ const currentInputValue = e.input.value;
964
+
965
+ // Skip validation if the input has no value
966
+ if (!currentInputValue) return false;
967
+
968
+ /**
969
+ * Let's check if the option selected and combobox value match.
970
+ */
971
+
972
+ // Guard Clause: If there is no option selected fail the validation
973
+ if (!e.optionSelected) return true;
974
+
975
+ // Guard Clause: If there is no value fail the validation
976
+ if (!e.value) return true;
977
+
978
+ // Guard Clause: If the selected option's value doesn't match the input value fail the validation
979
+ if (e.optionSelected.value !== e.value) return true;
980
+
981
+ /**
982
+ * Now let's make sure the user hasn't change the value in the input after selecting an option.
983
+ * This is to make sure there's no user confusion if they select an option but then change the value to something else.
984
+ */
985
+
986
+ // Guard Clause: If the current input value doesn't match the option selected value fail the validation
987
+ if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
988
+
989
+ // Guard Clause: If the current input value doesn't match the combobox value fail the validation
990
+ if (currentInputValue && currentInputValue !== e.value) return true;
991
+
992
+ // If all the checks passed the validation passes
993
+ return false;
994
+ },
995
+ validity: 'valueMissing',
996
+ message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
997
+ }
998
+ ]
953
999
  }
954
1000
  };
955
1001
 
@@ -958,6 +1004,8 @@ class AuroFormValidation {
958
1004
  elementType = 'input';
959
1005
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
960
1006
  elementType = 'counter';
1007
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
1008
+ elementType = 'combobox';
961
1009
  }
962
1010
 
963
1011
  if (elementType) {
@@ -1144,6 +1192,15 @@ class AuroFormValidation {
1144
1192
  }
1145
1193
  }
1146
1194
 
1195
+ const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
1196
+
1197
+ if (isCombobox) {
1198
+
1199
+ if (!elem.persistInput || elem.behavior === "filter") {
1200
+ hasValue = elem.input.value?.length > 0;
1201
+ }
1202
+ }
1203
+
1147
1204
  if (!hasValue && elem.required && elem.touched) {
1148
1205
  elem.validity = 'valueMissing';
1149
1206
  elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1152,6 +1209,11 @@ class AuroFormValidation {
1152
1209
  this.validateElementAttributes(elem);
1153
1210
  } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
1154
1211
  this.validateElementAttributes(elem);
1212
+ } else if (isCombobox) {
1213
+ this.validateElementAttributes(elem);
1214
+
1215
+ // Don't run extra validation for cases where the combobox is not being used as a filter
1216
+ validationShouldRun = elem.behavior !== 'filter';
1155
1217
  }
1156
1218
  }
1157
1219
 
@@ -1159,8 +1221,8 @@ class AuroFormValidation {
1159
1221
 
1160
1222
  const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
1161
1223
 
1162
- // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
1163
- if (!isCombobox || isCombobox && !elem.persistValue) {
1224
+ // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
1225
+ if (!isCombobox || isCombobox && !elem.persistInput) {
1164
1226
 
1165
1227
  // run validation on all inputs since we're going to use them to set the validity of this component
1166
1228
  this.auroInputElements.forEach(input => input.validate());
@@ -1233,6 +1295,8 @@ class AuroFormValidation {
1233
1295
  if (input.validationMessage.length > 0) {
1234
1296
  elem.errorMessage = input.validationMessage;
1235
1297
  }
1298
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
1299
+ elem.errorMessage = elem.input?.inputElement?.validationMessage;
1236
1300
  } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
1237
1301
  const firstInput = this.inputElements[0];
1238
1302
 
@@ -1561,6 +1625,7 @@ class AuroRadioGroup extends i$2 {
1561
1625
  this.optionSelected = undefined;
1562
1626
  this.onDark = false;
1563
1627
  this.touched = false;
1628
+ this.hasLegend = false;
1564
1629
 
1565
1630
  /**
1566
1631
  * @private
@@ -1665,6 +1730,18 @@ class AuroRadioGroup extends i$2 {
1665
1730
  type: Boolean,
1666
1731
  reflect: true,
1667
1732
  attribute: false
1733
+ },
1734
+
1735
+ /**
1736
+ * Indicates whether the legend slot is set or not.
1737
+ * @type {boolean}
1738
+ * @default false
1739
+ * @private
1740
+ */
1741
+ hasLegend: {
1742
+ type: Boolean,
1743
+ reflect: false,
1744
+ attribute: false
1668
1745
  }
1669
1746
  };
1670
1747
  }
@@ -1853,6 +1930,18 @@ class AuroRadioGroup extends i$2 {
1853
1930
  this.handleItems();
1854
1931
  }
1855
1932
 
1933
+ /**
1934
+ * Method for handling legend slot changes.
1935
+ * @private
1936
+ * @returns {void}
1937
+ */
1938
+ handleLegendSlotChange() {
1939
+ const slot = this.shadowRoot.querySelector('slot[name="legend"]');
1940
+ if (slot) {
1941
+ this.hasLegend = slot.assignedNodes().length > 0;
1942
+ }
1943
+ }
1944
+
1856
1945
  /**
1857
1946
  * Method for initializing the tab index of the checked radio input.
1858
1947
  * @private
@@ -1967,11 +2056,14 @@ class AuroRadioGroup extends i$2 {
1967
2056
  const groupClasses = {
1968
2057
  'displayFlex': this.horizontal && this.items.length <= this.max
1969
2058
  };
2059
+ const legendClasses = {
2060
+ 'hidden': !this.hasLegend && this.required
2061
+ };
1970
2062
 
1971
2063
  return u`
1972
2064
  <fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
1973
- <legend>
1974
- <slot name="legend"></slot>
2065
+ <legend class="${e(legendClasses)}">
2066
+ <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
1975
2067
  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
1976
2068
  </legend>
1977
2069
  <slot @slotchange=${this.handleSlotChange}></slot>
@@ -76,6 +76,13 @@ export class AuroRadioGroup extends LitElement {
76
76
  * @private
77
77
  */
78
78
  touched: boolean;
79
+ /**
80
+ * Indicates whether the legend slot is set or not.
81
+ * @type {boolean}
82
+ * @default false
83
+ * @private
84
+ */
85
+ hasLegend: boolean;
79
86
  };
80
87
  /**
81
88
  * This will register this element with the browser.
@@ -95,6 +102,7 @@ export class AuroRadioGroup extends LitElement {
95
102
  optionSelected: EventTarget;
96
103
  onDark: boolean;
97
104
  touched: boolean;
105
+ hasLegend: boolean;
98
106
  /**
99
107
  * @private
100
108
  */
@@ -164,6 +172,12 @@ export class AuroRadioGroup extends LitElement {
164
172
  * @returns {void}
165
173
  */
166
174
  private handleSlotChange;
175
+ /**
176
+ * Method for handling legend slot changes.
177
+ * @private
178
+ * @returns {void}
179
+ */
180
+ private handleLegendSlotChange;
167
181
  /**
168
182
  * Method for initializing the tab index of the checked radio input.
169
183
  * @private