@aurodesignsystem-dev/auro-formkit 0.0.0-pr649.6 → 0.0.0-pr652.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 (95) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +2 -2
  3. package/components/bibtemplate/dist/registered.js +2 -2
  4. package/components/checkbox/demo/api.min.js +13 -2
  5. package/components/checkbox/demo/index.min.js +13 -2
  6. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  7. package/components/checkbox/dist/auro-checkbox.d.ts +5 -1
  8. package/components/checkbox/dist/index.js +13 -2
  9. package/components/checkbox/dist/registered.js +13 -2
  10. package/components/combobox/demo/api.md +30 -27
  11. package/components/combobox/demo/api.min.js +1927 -517
  12. package/components/combobox/demo/index.html +1 -0
  13. package/components/combobox/demo/index.md +75 -0
  14. package/components/combobox/demo/index.min.js +1925 -515
  15. package/components/combobox/dist/auro-combobox.d.ts +29 -14
  16. package/components/combobox/dist/index.js +1630 -408
  17. package/components/combobox/dist/registered.js +1630 -408
  18. package/components/counter/demo/api.min.js +433 -104
  19. package/components/counter/demo/index.min.js +433 -104
  20. package/components/counter/dist/iconVersion.d.ts +1 -1
  21. package/components/counter/dist/index.js +433 -104
  22. package/components/counter/dist/registered.js +433 -104
  23. package/components/datepicker/demo/api.min.js +1157 -376
  24. package/components/datepicker/demo/index.min.js +1157 -376
  25. package/components/datepicker/dist/index.js +1156 -375
  26. package/components/datepicker/dist/registered.js +1156 -375
  27. package/components/dropdown/demo/api.md +59 -35
  28. package/components/dropdown/demo/api.min.js +361 -88
  29. package/components/dropdown/demo/index.md +52 -0
  30. package/components/dropdown/demo/index.min.js +361 -88
  31. package/components/dropdown/dist/auro-dropdown.d.ts +70 -21
  32. package/components/dropdown/dist/index.js +331 -58
  33. package/components/dropdown/dist/registered.js +331 -58
  34. package/components/input/README.md +1 -1
  35. package/components/input/demo/api.md +76 -64
  36. package/components/input/demo/api.min.js +747 -295
  37. package/components/input/demo/index.html +1 -1
  38. package/components/input/demo/index.md +49 -4
  39. package/components/input/demo/index.min.js +747 -295
  40. package/components/input/demo/readme.md +1 -1
  41. package/components/input/dist/auro-input.d.ts +97 -3
  42. package/components/input/dist/base-input.d.ts +36 -18
  43. package/components/input/dist/index.js +681 -229
  44. package/components/input/dist/registered.js +681 -229
  45. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  46. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  47. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  48. package/components/input/dist/styles/default/input-css.d.ts +2 -0
  49. package/components/input/dist/styles/default/label-css.d.ts +2 -0
  50. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  51. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  52. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  53. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  54. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  55. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  56. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  57. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  58. package/components/layoutElement/dist/index.d.ts +1 -0
  59. package/components/layoutElement/dist/index.js +1 -0
  60. package/components/layoutElement/dist/registered.js +1 -0
  61. package/components/menu/demo/api.md +24 -22
  62. package/components/menu/demo/api.min.js +338 -58
  63. package/components/menu/demo/index.min.js +338 -58
  64. package/components/menu/dist/auro-menu-utils.d.ts +8 -0
  65. package/components/menu/dist/auro-menu.d.ts +32 -7
  66. package/components/menu/dist/auro-menuoption.d.ts +27 -3
  67. package/components/menu/dist/iconVersion.d.ts +1 -1
  68. package/components/menu/dist/index.d.ts +1 -1
  69. package/components/menu/dist/index.js +298 -59
  70. package/components/menu/dist/registered.js +338 -58
  71. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  72. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  73. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  74. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  75. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  76. package/components/menu/dist/styles/emphasized/color-menuoption-css.d.ts +2 -0
  77. package/components/menu/dist/styles/emphasized/style-menu-css.d.ts +2 -0
  78. package/components/menu/dist/styles/emphasized/style-menuoption-css.d.ts +2 -0
  79. package/components/select/demo/api.md +32 -32
  80. package/components/select/demo/api.min.js +756 -182
  81. package/components/select/demo/index.min.js +754 -180
  82. package/components/select/dist/auro-select.d.ts +13 -12
  83. package/components/select/dist/index.js +411 -117
  84. package/components/select/dist/registered.js +411 -117
  85. package/package.json +2 -2
  86. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  87. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  88. /package/components/{input/dist/styles/borders-css.d.ts → dropdown/dist/styles/default/bibColors-css.d.ts} +0 -0
  89. /package/components/{input/dist/styles/label-css.d.ts → dropdown/dist/styles/default/bibStyles-css.d.ts} +0 -0
  90. /package/components/{input/dist/styles/notificationIcons-css.d.ts → dropdown/dist/styles/default/color-css.d.ts} +0 -0
  91. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/default/style-css.d.ts} +0 -0
  92. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/emphasized/style-css.d.ts} +0 -0
  93. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/shapeSize-css.d.ts} +0 -0
  94. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/snowflake/style-css.d.ts} +0 -0
  95. /package/components/{menu/dist/styles/tokens-css.d.ts → input/dist/styles/classic/color-css.d.ts} +0 -0
@@ -1,2 +1,2 @@
1
- declare const _default: "8.0.2";
1
+ declare const _default: "8.0.3";
2
2
  export default _default;
@@ -271,7 +271,7 @@ class BaseIcon extends AuroElement {
271
271
 
272
272
  var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
273
273
 
274
- var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
274
+ var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
275
275
 
276
276
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
277
277
  // See LICENSE in the project root for license information.
@@ -440,7 +440,7 @@ class AuroIcon extends BaseIcon {
440
440
  }
441
441
  }
442
442
 
443
- var iconVersion = '8.0.2';
443
+ var iconVersion = '8.0.3';
444
444
 
445
445
  var styleCss = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
446
446
 
@@ -271,7 +271,7 @@ class BaseIcon extends AuroElement {
271
271
 
272
272
  var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
273
273
 
274
- var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
274
+ var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
275
275
 
276
276
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
277
277
  // See LICENSE in the project root for license information.
@@ -440,7 +440,7 @@ class AuroIcon extends BaseIcon {
440
440
  }
441
441
  }
442
442
 
443
- var iconVersion = '8.0.2';
443
+ var iconVersion = '8.0.3';
444
444
 
445
445
  var styleCss = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
446
446
 
@@ -180,6 +180,7 @@ class AuroCheckbox extends i$2 {
180
180
  // function to define props used within the scope of this component
181
181
  static get properties() {
182
182
  return {
183
+ ...super.properties,
183
184
 
184
185
  /**
185
186
  * If set to true, the checkbox will be filled with a checkmark.
@@ -354,8 +355,11 @@ class AuroCheckbox extends i$2 {
354
355
  });
355
356
  }
356
357
 
357
- // function that renders the HTML and CSS into the scope of the component
358
- render() {
358
+ /**
359
+ * @private
360
+ * @returns {HTMLElement}
361
+ */
362
+ getLayoutDefault() {
359
363
  const labelClasses = {
360
364
  'label': true,
361
365
  'label--cbx': true,
@@ -1496,6 +1500,7 @@ class AuroCheckboxGroup extends i$2 {
1496
1500
 
1497
1501
  static get properties() {
1498
1502
  return {
1503
+ ...super.properties,
1499
1504
 
1500
1505
  /**
1501
1506
  * If set, disables the checkbox group.
@@ -1728,6 +1733,12 @@ class AuroCheckboxGroup extends i$2 {
1728
1733
  * @returns {void}
1729
1734
  */
1730
1735
  updated(changedProperties) {
1736
+ if (changedProperties.has('layout')) {
1737
+ this.checkboxes.forEach((el) => {
1738
+ el.layout = this.layout;
1739
+ });
1740
+ }
1741
+
1731
1742
  if (changedProperties.has('disabled')) {
1732
1743
  this.checkboxes.forEach((el) => {
1733
1744
  if (this.disabled) {
@@ -172,6 +172,7 @@ class AuroCheckbox extends i$2 {
172
172
  // function to define props used within the scope of this component
173
173
  static get properties() {
174
174
  return {
175
+ ...super.properties,
175
176
 
176
177
  /**
177
178
  * If set to true, the checkbox will be filled with a checkmark.
@@ -346,8 +347,11 @@ class AuroCheckbox extends i$2 {
346
347
  });
347
348
  }
348
349
 
349
- // function that renders the HTML and CSS into the scope of the component
350
- render() {
350
+ /**
351
+ * @private
352
+ * @returns {HTMLElement}
353
+ */
354
+ getLayoutDefault() {
351
355
  const labelClasses = {
352
356
  'label': true,
353
357
  'label--cbx': true,
@@ -1488,6 +1492,7 @@ class AuroCheckboxGroup extends i$2 {
1488
1492
 
1489
1493
  static get properties() {
1490
1494
  return {
1495
+ ...super.properties,
1491
1496
 
1492
1497
  /**
1493
1498
  * If set, disables the checkbox group.
@@ -1720,6 +1725,12 @@ class AuroCheckboxGroup extends i$2 {
1720
1725
  * @returns {void}
1721
1726
  */
1722
1727
  updated(changedProperties) {
1728
+ if (changedProperties.has('layout')) {
1729
+ this.checkboxes.forEach((el) => {
1730
+ el.layout = this.layout;
1731
+ });
1732
+ }
1733
+
1723
1734
  if (changedProperties.has('disabled')) {
1724
1735
  this.checkboxes.forEach((el) => {
1725
1736
  if (this.disabled) {
@@ -163,4 +163,4 @@ export class AuroCheckboxGroup extends LitElement {
163
163
  validate(force?: boolean): void;
164
164
  render(): import("lit-html").TemplateResult;
165
165
  }
166
- import { LitElement } from "lit";
166
+ import { LitElement } from 'lit';
@@ -124,6 +124,10 @@ export class AuroCheckbox extends LitElement {
124
124
  reset(): void;
125
125
  firstUpdated(): void;
126
126
  inputId: string;
127
- render(): import("lit-html").TemplateResult<1>;
127
+ /**
128
+ * @private
129
+ * @returns {HTMLElement}
130
+ */
131
+ private getLayoutDefault;
128
132
  }
129
133
  import { LitElement } from "lit";
@@ -132,6 +132,7 @@ class AuroCheckbox extends LitElement {
132
132
  // function to define props used within the scope of this component
133
133
  static get properties() {
134
134
  return {
135
+ ...super.properties,
135
136
 
136
137
  /**
137
138
  * If set to true, the checkbox will be filled with a checkmark.
@@ -306,8 +307,11 @@ class AuroCheckbox extends LitElement {
306
307
  });
307
308
  }
308
309
 
309
- // function that renders the HTML and CSS into the scope of the component
310
- render() {
310
+ /**
311
+ * @private
312
+ * @returns {HTMLElement}
313
+ */
314
+ getLayoutDefault() {
311
315
  const labelClasses = {
312
316
  'label': true,
313
317
  'label--cbx': true,
@@ -1441,6 +1445,7 @@ class AuroCheckboxGroup extends LitElement {
1441
1445
 
1442
1446
  static get properties() {
1443
1447
  return {
1448
+ ...super.properties,
1444
1449
 
1445
1450
  /**
1446
1451
  * If set, disables the checkbox group.
@@ -1673,6 +1678,12 @@ class AuroCheckboxGroup extends LitElement {
1673
1678
  * @returns {void}
1674
1679
  */
1675
1680
  updated(changedProperties) {
1681
+ if (changedProperties.has('layout')) {
1682
+ this.checkboxes.forEach((el) => {
1683
+ el.layout = this.layout;
1684
+ });
1685
+ }
1686
+
1676
1687
  if (changedProperties.has('disabled')) {
1677
1688
  this.checkboxes.forEach((el) => {
1678
1689
  if (this.disabled) {
@@ -132,6 +132,7 @@ class AuroCheckbox extends LitElement {
132
132
  // function to define props used within the scope of this component
133
133
  static get properties() {
134
134
  return {
135
+ ...super.properties,
135
136
 
136
137
  /**
137
138
  * If set to true, the checkbox will be filled with a checkmark.
@@ -306,8 +307,11 @@ class AuroCheckbox extends LitElement {
306
307
  });
307
308
  }
308
309
 
309
- // function that renders the HTML and CSS into the scope of the component
310
- render() {
310
+ /**
311
+ * @private
312
+ * @returns {HTMLElement}
313
+ */
314
+ getLayoutDefault() {
311
315
  const labelClasses = {
312
316
  'label': true,
313
317
  'label--cbx': true,
@@ -1441,6 +1445,7 @@ class AuroCheckboxGroup extends LitElement {
1441
1445
 
1442
1446
  static get properties() {
1443
1447
  return {
1448
+ ...super.properties,
1444
1449
 
1445
1450
  /**
1446
1451
  * If set, disables the checkbox group.
@@ -1673,6 +1678,12 @@ class AuroCheckboxGroup extends LitElement {
1673
1678
  * @returns {void}
1674
1679
  */
1675
1680
  updated(changedProperties) {
1681
+ if (changedProperties.has('layout')) {
1682
+ this.checkboxes.forEach((el) => {
1683
+ el.layout = this.layout;
1684
+ });
1685
+ }
1686
+
1676
1687
  if (changedProperties.has('disabled')) {
1677
1688
  this.checkboxes.forEach((el) => {
1678
1689
  if (this.disabled) {
@@ -5,37 +5,40 @@
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Type | Default | Description |
9
- |---------------------------------|---------------------------------|---------------|----------------|--------------------------------------------------|
10
- | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | | If declared, bib's position will be automatically calculated where to appear. |
11
- | [autocomplete](#autocomplete) | `autocomplete` | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
12
- | [checkmark](#checkmark) | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
13
- | [disabled](#disabled) | `disabled` | `boolean` | | If set, disables the combobox. |
14
- | [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
15
- | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
16
- | [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
17
- | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
18
- | [noFilter](#noFilter) | `noFilter` | `boolean` | | If set, combobox will not filter menuoptions based in input. |
19
- | [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
20
- | [noValidate](#noValidate) | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
21
- | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
22
- | [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
23
- | [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement` | | Specifies the current selected option. |
24
- | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
25
- | [required](#required) | `required` | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
26
- | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
27
- | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
28
- | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
29
- | [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
30
- | [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
31
- | [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
32
- | [value](#value) | `value` | `string` | | Value selected for the dropdown menu. |
8
+ | Property | Attribute | Type | Default | Description |
9
+ |---------------------------------|---------------------------------|------------------------|----------------|--------------------------------------------------|
10
+ | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | | If declared, bib's position will be automatically calculated where to appear. |
11
+ | [autocomplete](#autocomplete) | `autocomplete` | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
12
+ | [checkmark](#checkmark) | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
13
+ | [disabled](#disabled) | `disabled` | `boolean` | | If set, disables the combobox. |
14
+ | [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
15
+ | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
16
+ | [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
17
+ | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
18
+ | [layout](#layout) | | `string` | | |
19
+ | [noFilter](#noFilter) | `noFilter` | `boolean` | | If set, combobox will not filter menuoptions based in input. |
20
+ | [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
21
+ | [noValidate](#noValidate) | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
22
+ | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
23
+ | [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
24
+ | [optionSelected](#optionSelected) | `optionSelected` | `object` | | Specifies the current selected option. |
25
+ | [placeholder](#placeholder) | `placeholder` | `string` | | Define custom placeholder text, only supported by date input formats. |
26
+ | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
27
+ | [required](#required) | `required` | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
28
+ | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
29
+ | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
30
+ | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
31
+ | [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
32
+ | [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
33
+ | [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
34
+ | [value](#value) | `value` | `Array\|String<Array>` | | Value selected for the dropdown menu. |
33
35
 
34
36
  ## Methods
35
37
 
36
38
  | Method | Type | Description |
37
39
  |------------|----------------------------------------|--------------------------------------------------|
38
40
  | [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
41
+ | [isValid](#isValid) | `(): boolean` | |
39
42
  | [reset](#reset) | `(): void` | Resets component to initial state. |
40
43
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
41
44
 
@@ -684,11 +687,11 @@ export function valueExample() {
684
687
  const valueExample = document.querySelector('#valueExample');
685
688
 
686
689
  document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
687
- valueExample.value = 'Oranges';
690
+ valueExample.value = ['Oranges'];
688
691
  });
689
692
 
690
693
  document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
691
- valueExample.value = 'Dragon Fruit';
694
+ valueExample.value = ['Dragon Fruit'];
692
695
  });
693
696
 
694
697
  document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {