@aurodesignsystem-dev/auro-formkit 0.0.0-pr1544.0 → 0.0.0-pr1544.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/components/checkbox/demo/customize.min.js +1 -1
  2. package/components/checkbox/demo/getting-started.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/api.md +1 -1
  7. package/components/combobox/demo/customize.min.js +91 -22
  8. package/components/combobox/demo/getting-started.min.js +91 -22
  9. package/components/combobox/demo/index.md +1 -0
  10. package/components/combobox/demo/index.min.js +91 -22
  11. package/components/combobox/dist/auro-combobox.d.ts +1 -1
  12. package/components/combobox/dist/index.js +4 -4
  13. package/components/combobox/dist/registered.js +4 -4
  14. package/components/counter/demo/customize.min.js +2 -2
  15. package/components/counter/demo/index.min.js +2 -2
  16. package/components/counter/dist/index.js +2 -2
  17. package/components/counter/dist/registered.js +2 -2
  18. package/components/datepicker/demo/customize.md +29 -0
  19. package/components/datepicker/demo/customize.min.js +8 -4
  20. package/components/datepicker/demo/index.min.js +8 -4
  21. package/components/datepicker/dist/index.js +8 -4
  22. package/components/datepicker/dist/registered.js +8 -4
  23. package/components/dropdown/demo/customize.min.js +1 -1
  24. package/components/dropdown/demo/getting-started.min.js +1 -1
  25. package/components/dropdown/demo/index.min.js +1 -1
  26. package/components/dropdown/dist/index.js +1 -1
  27. package/components/dropdown/dist/registered.js +1 -1
  28. package/components/form/demo/customize.min.js +111 -34
  29. package/components/form/demo/getting-started.min.js +111 -34
  30. package/components/form/demo/index.min.js +111 -34
  31. package/components/form/demo/registerDemoDeps.min.js +111 -34
  32. package/components/input/demo/customize.min.js +1 -1
  33. package/components/input/demo/getting-started.min.js +1 -1
  34. package/components/input/demo/index.min.js +1 -1
  35. package/components/input/dist/index.js +1 -1
  36. package/components/input/dist/registered.js +1 -1
  37. package/components/menu/demo/accessibility.md +4 -4
  38. package/components/menu/demo/api.md +26 -19
  39. package/components/menu/demo/css-only.md +26 -19
  40. package/components/menu/demo/customize.md +307 -47
  41. package/components/menu/demo/design.md +1 -1
  42. package/components/menu/demo/getting-started.md +144 -7
  43. package/components/menu/demo/index.min.js +214 -19
  44. package/components/menu/demo/keyboard-behavior.md +83 -4
  45. package/components/menu/demo/voiceover.md +12 -8
  46. package/components/menu/demo/why-menu.md +8 -9
  47. package/components/menu/dist/auro-menu-utils.d.ts +19 -0
  48. package/components/menu/dist/auro-menu.d.ts +4 -8
  49. package/components/menu/dist/auro-menuoption.d.ts +12 -0
  50. package/components/menu/dist/index.js +87 -18
  51. package/components/menu/dist/registered.js +87 -18
  52. package/components/radio/demo/customize.min.js +1 -1
  53. package/components/radio/demo/getting-started.min.js +1 -1
  54. package/components/radio/demo/index.min.js +1 -1
  55. package/components/radio/dist/index.js +1 -1
  56. package/components/radio/dist/registered.js +1 -1
  57. package/components/select/demo/api.md +2 -2
  58. package/components/select/demo/customize.md +5 -2
  59. package/components/select/demo/customize.min.js +94 -21
  60. package/components/select/demo/design.md +10 -10
  61. package/components/select/demo/getting-started.md +1 -1
  62. package/components/select/demo/getting-started.min.js +94 -21
  63. package/components/select/demo/index.md +2 -2
  64. package/components/select/demo/index.min.js +94 -21
  65. package/components/select/demo/keyboard-behavior.md +49 -18
  66. package/components/select/dist/auro-select.d.ts +6 -2
  67. package/components/select/dist/index.js +7 -3
  68. package/components/select/dist/registered.js +7 -3
  69. package/custom-elements.json +106 -32
  70. package/package.json +1 -1
@@ -4995,7 +4995,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4995
4995
  }
4996
4996
  };
4997
4997
 
4998
- var formkitVersion$1 = '202607082218';
4998
+ var formkitVersion$1 = '202607082328';
4999
4999
 
5000
5000
  class AuroElement extends i$2 {
5001
5001
  static get properties() {
@@ -7034,7 +7034,7 @@ class AuroHelpText extends i$2 {
7034
7034
  }
7035
7035
  }
7036
7036
 
7037
- var formkitVersion = '202607082218';
7037
+ var formkitVersion = '202607082328';
7038
7038
 
7039
7039
  var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7040
7040
 
@@ -7476,7 +7476,7 @@ class AuroSelect extends AuroElement$1 {
7476
7476
  },
7477
7477
 
7478
7478
  /**
7479
- * Value selected for the component.
7479
+ * Value selected for the component. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable by value.
7480
7480
  */
7481
7481
  value: {
7482
7482
  type: String,
@@ -8296,6 +8296,10 @@ class AuroSelect extends AuroElement$1 {
8296
8296
  this._observeLabelChanges();
8297
8297
  }
8298
8298
 
8299
+ /**
8300
+ * Sets the selected value by matching it against the menu options. Options marked `disabled` or `static` are not selectable: if the value matches one, the selection is rejected and `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable.
8301
+ * @param {string} value - The value to match against the menu options.
8302
+ */
8299
8303
  setMenuValue(value) {
8300
8304
  if (!this.menu) return;
8301
8305
  this.menu.selectByValue(value);
@@ -8823,6 +8827,18 @@ var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
8823
8827
  // See LICENSE in the project root for license information.
8824
8828
 
8825
8829
 
8830
+ /**
8831
+ * Serializes a multi-select value array back into the String `value` property.
8832
+ * An empty (or missing) array collapses to `undefined` so an emptied selection
8833
+ * clears `value` rather than reflecting a `"[]"` attribute.
8834
+ * @private
8835
+ * @param {Array<string>|undefined} values - The selected values.
8836
+ * @returns {string|undefined} JSON string of the values, or undefined when empty.
8837
+ */
8838
+ function serializeMultiSelectValue(values) {
8839
+ return values && values.length > 0 ? JSON.stringify(values) : undefined;
8840
+ }
8841
+
8826
8842
  /**
8827
8843
  * Validates if an option can be interacted with.
8828
8844
  * @private
@@ -8835,6 +8851,20 @@ function isOptionInteractive(option) {
8835
8851
  !option.hasAttribute('static');
8836
8852
  }
8837
8853
 
8854
+ /**
8855
+ * Validates if an option may be selected by matching a programmatic value.
8856
+ * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
8857
+ * `hidden` as its type-ahead filter, so a filtered-out option is still a
8858
+ * valid programmatic selection. Only disabled and static options — which are
8859
+ * never selectable — are rejected.
8860
+ * @param {HTMLElement} option - The option to check.
8861
+ * @returns {boolean} True if option can be selected by value.
8862
+ */
8863
+ function isSelectableByValue(option) {
8864
+ return !option.hasAttribute('disabled') &&
8865
+ !option.hasAttribute('static');
8866
+ }
8867
+
8838
8868
  /**
8839
8869
  * Helper method to dispatch custom events.
8840
8870
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -9004,22 +9034,26 @@ class AuroMenu extends AuroElement$1 {
9004
9034
 
9005
9035
  /**
9006
9036
  * Specifies the current active menuOption.
9037
+ * @readonly
9007
9038
  */
9008
9039
  optionActive: {
9009
9040
  type: Object,
9010
- attribute: 'optionactive'
9041
+ attribute: false
9011
9042
  },
9012
9043
 
9013
9044
  /**
9014
- * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
9045
+ * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
9046
+ * @readonly
9015
9047
  */
9016
9048
  optionSelected: {
9017
9049
  // Allow HTMLElement, HTMLElement[] arrays and undefined
9018
- type: Object
9050
+ type: Object,
9051
+ attribute: false
9019
9052
  },
9020
9053
 
9021
9054
  /**
9022
9055
  * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
9056
+ * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
9023
9057
  */
9024
9058
  value: {
9025
9059
  type: String,
@@ -9143,7 +9177,7 @@ class AuroMenu extends AuroElement$1 {
9143
9177
  }
9144
9178
 
9145
9179
  /**
9146
- * Selects options by value.
9180
+ * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
9147
9181
  * @param {string|string[]|undefined|null} value - The value(s) to select.
9148
9182
  * @public
9149
9183
  */
@@ -9228,6 +9262,11 @@ class AuroMenu extends AuroElement$1 {
9228
9262
  this.initItems();
9229
9263
  }
9230
9264
 
9265
+ // Set when reconciliation reassigns `value` below. That reassignment schedules a
9266
+ // second updated() cycle, so the `event`-attribute dispatch is deferred to that
9267
+ // cycle to avoid firing option custom events twice on the same selection.
9268
+ let valueReconciled = false;
9269
+
9231
9270
  // Handle null/undefined/empty case — empty/whitespace strings clear selection
9232
9271
  // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
9233
9272
  if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -9240,11 +9279,31 @@ class AuroMenu extends AuroElement$1 {
9240
9279
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
9241
9280
  // and calling `.includes` on undefined would throw during reconciliation.
9242
9281
  const valueArray = this.formattedValue || [];
9243
- const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
9282
+ const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
9244
9283
  newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
9284
+
9285
+ // Reconcile `value` with the selectable set. Drop only entries whose option is
9286
+ // loaded but non-selectable (disabled/static) — leaving them would desync `value`
9287
+ // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
9288
+ // so the rejected entry would resurface on the next select/deselect. Entries with no
9289
+ // matching item yet are preserved so async preselection still works once options render.
9290
+ const rejectedValues = this.items
9291
+ ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
9292
+ : [];
9293
+ if (rejectedValues.length > 0) {
9294
+ const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
9295
+ this.value = serializeMultiSelectValue(reconciled);
9296
+ valueReconciled = true;
9297
+ }
9245
9298
  } else {
9246
- // In single-select mode, this.value should be a string
9247
- const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
9299
+ // In single-select mode, this.value should be a string. Reject
9300
+ // disabled/static options so a programmatic value pointing at a
9301
+ // non-selectable option falls through to the no-match path below
9302
+ // (dispatching auroMenu-selectValueFailure) instead of pinning it.
9303
+ // `hidden` is intentionally NOT excluded: the combobox toggles
9304
+ // `hidden` as its type-ahead filter, so a filtered-out option is
9305
+ // still a valid programmatic selection.
9306
+ const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
9248
9307
 
9249
9308
  if (matchingOption) {
9250
9309
  newSelected = matchingOption;
@@ -9286,8 +9345,9 @@ class AuroMenu extends AuroElement$1 {
9286
9345
  ]
9287
9346
  ]));
9288
9347
 
9289
- // Notify of changes
9290
- if (this.optionSelected !== undefined) {
9348
+ // Notify of changes. Skip when reconciliation just reassigned `value`: the
9349
+ // follow-on update cycle re-runs this branch and fires the events exactly once.
9350
+ if (this.optionSelected !== undefined && !valueReconciled) {
9291
9351
  const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
9292
9352
  selected.forEach((opt) => {
9293
9353
  if (opt.hasAttribute('event')) {
@@ -9500,7 +9560,7 @@ class AuroMenu extends AuroElement$1 {
9500
9560
  const currentSelected = this.optionSelected || [];
9501
9561
 
9502
9562
  if (!currentValue.includes(option.value)) {
9503
- this.value = JSON.stringify([
9563
+ this.value = serializeMultiSelectValue([
9504
9564
  ...currentValue,
9505
9565
  option.value
9506
9566
  ]);
@@ -9526,15 +9586,9 @@ class AuroMenu extends AuroElement$1 {
9526
9586
  */
9527
9587
  handleDeselectState(option) {
9528
9588
  if (this.multiSelect) {
9529
- // Remove this option from array
9589
+ // Remove this option from array; an empty result collapses `value` to undefined.
9530
9590
  const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
9531
-
9532
- // If array is empty after removal, set back to undefined
9533
- if (newFormattedValue && newFormattedValue.length === 0) {
9534
- this.value = undefined;
9535
- } else {
9536
- this.value = JSON.stringify(newFormattedValue);
9537
- }
9591
+ this.value = serializeMultiSelectValue(newFormattedValue);
9538
9592
 
9539
9593
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
9540
9594
  if (this.optionSelected.length === 0) {
@@ -9581,6 +9635,11 @@ class AuroMenu extends AuroElement$1 {
9581
9635
  this.optionSelected = undefined;
9582
9636
  this._index = -1;
9583
9637
 
9638
+ // Clear active option state so a follow-up open/navigation starts fresh
9639
+ // rather than reusing a stale reference from before the reset.
9640
+ this.items?.forEach((item) => item.classList.remove('active'));
9641
+ this.optionActive = undefined;
9642
+
9584
9643
  // Reset UI state
9585
9644
  this.updateItemsState(new Map([
9586
9645
  [
@@ -9990,6 +10049,7 @@ let menuOptionIdCounter = 0;
9990
10049
  * The `auro-menuoption` element provides users a way to define a menu option.
9991
10050
  * @customElement auro-menuoption
9992
10051
  *
10052
+ * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
9993
10053
  * @slot default - The default slot for the menu option text.
9994
10054
  *
9995
10055
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -10019,6 +10079,7 @@ class AuroMenuOption extends AuroElement$1 {
10019
10079
  this.noCheckmark = false;
10020
10080
  this.disabled = false;
10021
10081
  this.noMatch = false;
10082
+ this.persistent = false;
10022
10083
 
10023
10084
  /**
10024
10085
  * @private
@@ -10040,6 +10101,12 @@ class AuroMenuOption extends AuroElement$1 {
10040
10101
  type: Boolean,
10041
10102
  reflect: true
10042
10103
  },
10104
+
10105
+ /**
10106
+ * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
10107
+ *
10108
+ * @deprecated Use the `value` attribute on `auro-menu` instead.
10109
+ */
10043
10110
  selected: {
10044
10111
  type: Boolean,
10045
10112
  reflect: true
@@ -10074,6 +10141,12 @@ class AuroMenuOption extends AuroElement$1 {
10074
10141
  reflect: true,
10075
10142
  attribute: 'nomatch'
10076
10143
  },
10144
+
10145
+ /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
10146
+ persistent: {
10147
+ type: Boolean,
10148
+ reflect: true
10149
+ },
10077
10150
  };
10078
10151
  }
10079
10152
 
@@ -110,10 +110,10 @@
110
110
  <p>In some cases it is necessary to preset the value of the component as part of the initial render.</p>
111
111
  <auro-header level="4" id="us3a">Single Select</auro-header>
112
112
  <p>When a value is preset, the matching option in the menu will be marked as both <code>active</code> and <code>selected</code>.</p>
113
- <p>If a preset value is defined that does not match any enabled option, the value is reset to <code>undefined</code>.</p>
113
+ <p>If a preset value is defined that does not match any option, the value is reset to <code>undefined</code>. A value that matches an option marked <code>disabled</code> or <code>static</code> is also rejected and reset to <code>undefined</code>; a value matching a <code>hidden</code> option is still applied.</p>
114
114
  <auro-header level="4" id="us3b">Multi Select</auro-header>
115
115
  <p>When configured for multi-select, the preset value may include multiple options. The first selected option will also be marked <code>active</code>.</p>
116
- <p>If one or more preset values do not match any option they will be discarded. If no preset values match any option, the value is reset to <code>undefined</code>.</p>
116
+ <p>If one or more preset values do not match any option — or match an option marked <code>disabled</code> or <code>static</code> — they will be discarded. If no preset values remain, the value is reset to <code>undefined</code>.</p>
117
117
  <div class="note"><strong>Important caveat:</strong> Multi-select is notoriously difficult for all users, including screen reader users — WCAG and usability research generally recommend avoiding <code>&lt;auro-select multiSelect></code> in favor of checkboxes or other patterns that make multi-selection more discoverable.</div>
118
118
  <auro-header level="3" id="multiselect">Multi-select</auro-header>
119
119
  <p>In certain cases it may be valid to allow more than one option to be selected. When the component is configured to support multi-select only one option is still able to be marked <code>active</code>. However, multiple options may be <code>selected</code> via click, tap or keyboard events on each option. A second click, tap or keyboard event on an already selected option will de-select it.</p>
@@ -4995,7 +4995,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4995
4995
  }
4996
4996
  };
4997
4997
 
4998
- var formkitVersion$1 = '202607082218';
4998
+ var formkitVersion$1 = '202607082328';
4999
4999
 
5000
5000
  class AuroElement extends i$2 {
5001
5001
  static get properties() {
@@ -7034,7 +7034,7 @@ class AuroHelpText extends i$2 {
7034
7034
  }
7035
7035
  }
7036
7036
 
7037
- var formkitVersion = '202607082218';
7037
+ var formkitVersion = '202607082328';
7038
7038
 
7039
7039
  var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7040
7040
 
@@ -7476,7 +7476,7 @@ class AuroSelect extends AuroElement$1 {
7476
7476
  },
7477
7477
 
7478
7478
  /**
7479
- * Value selected for the component.
7479
+ * Value selected for the component. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable by value.
7480
7480
  */
7481
7481
  value: {
7482
7482
  type: String,
@@ -8296,6 +8296,10 @@ class AuroSelect extends AuroElement$1 {
8296
8296
  this._observeLabelChanges();
8297
8297
  }
8298
8298
 
8299
+ /**
8300
+ * Sets the selected value by matching it against the menu options. Options marked `disabled` or `static` are not selectable: if the value matches one, the selection is rejected and `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable.
8301
+ * @param {string} value - The value to match against the menu options.
8302
+ */
8299
8303
  setMenuValue(value) {
8300
8304
  if (!this.menu) return;
8301
8305
  this.menu.selectByValue(value);
@@ -8823,6 +8827,18 @@ var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
8823
8827
  // See LICENSE in the project root for license information.
8824
8828
 
8825
8829
 
8830
+ /**
8831
+ * Serializes a multi-select value array back into the String `value` property.
8832
+ * An empty (or missing) array collapses to `undefined` so an emptied selection
8833
+ * clears `value` rather than reflecting a `"[]"` attribute.
8834
+ * @private
8835
+ * @param {Array<string>|undefined} values - The selected values.
8836
+ * @returns {string|undefined} JSON string of the values, or undefined when empty.
8837
+ */
8838
+ function serializeMultiSelectValue(values) {
8839
+ return values && values.length > 0 ? JSON.stringify(values) : undefined;
8840
+ }
8841
+
8826
8842
  /**
8827
8843
  * Validates if an option can be interacted with.
8828
8844
  * @private
@@ -8835,6 +8851,20 @@ function isOptionInteractive(option) {
8835
8851
  !option.hasAttribute('static');
8836
8852
  }
8837
8853
 
8854
+ /**
8855
+ * Validates if an option may be selected by matching a programmatic value.
8856
+ * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
8857
+ * `hidden` as its type-ahead filter, so a filtered-out option is still a
8858
+ * valid programmatic selection. Only disabled and static options — which are
8859
+ * never selectable — are rejected.
8860
+ * @param {HTMLElement} option - The option to check.
8861
+ * @returns {boolean} True if option can be selected by value.
8862
+ */
8863
+ function isSelectableByValue(option) {
8864
+ return !option.hasAttribute('disabled') &&
8865
+ !option.hasAttribute('static');
8866
+ }
8867
+
8838
8868
  /**
8839
8869
  * Helper method to dispatch custom events.
8840
8870
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -9004,22 +9034,26 @@ class AuroMenu extends AuroElement$1 {
9004
9034
 
9005
9035
  /**
9006
9036
  * Specifies the current active menuOption.
9037
+ * @readonly
9007
9038
  */
9008
9039
  optionActive: {
9009
9040
  type: Object,
9010
- attribute: 'optionactive'
9041
+ attribute: false
9011
9042
  },
9012
9043
 
9013
9044
  /**
9014
- * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
9045
+ * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
9046
+ * @readonly
9015
9047
  */
9016
9048
  optionSelected: {
9017
9049
  // Allow HTMLElement, HTMLElement[] arrays and undefined
9018
- type: Object
9050
+ type: Object,
9051
+ attribute: false
9019
9052
  },
9020
9053
 
9021
9054
  /**
9022
9055
  * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
9056
+ * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
9023
9057
  */
9024
9058
  value: {
9025
9059
  type: String,
@@ -9143,7 +9177,7 @@ class AuroMenu extends AuroElement$1 {
9143
9177
  }
9144
9178
 
9145
9179
  /**
9146
- * Selects options by value.
9180
+ * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
9147
9181
  * @param {string|string[]|undefined|null} value - The value(s) to select.
9148
9182
  * @public
9149
9183
  */
@@ -9228,6 +9262,11 @@ class AuroMenu extends AuroElement$1 {
9228
9262
  this.initItems();
9229
9263
  }
9230
9264
 
9265
+ // Set when reconciliation reassigns `value` below. That reassignment schedules a
9266
+ // second updated() cycle, so the `event`-attribute dispatch is deferred to that
9267
+ // cycle to avoid firing option custom events twice on the same selection.
9268
+ let valueReconciled = false;
9269
+
9231
9270
  // Handle null/undefined/empty case — empty/whitespace strings clear selection
9232
9271
  // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
9233
9272
  if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -9240,11 +9279,31 @@ class AuroMenu extends AuroElement$1 {
9240
9279
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
9241
9280
  // and calling `.includes` on undefined would throw during reconciliation.
9242
9281
  const valueArray = this.formattedValue || [];
9243
- const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
9282
+ const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
9244
9283
  newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
9284
+
9285
+ // Reconcile `value` with the selectable set. Drop only entries whose option is
9286
+ // loaded but non-selectable (disabled/static) — leaving them would desync `value`
9287
+ // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
9288
+ // so the rejected entry would resurface on the next select/deselect. Entries with no
9289
+ // matching item yet are preserved so async preselection still works once options render.
9290
+ const rejectedValues = this.items
9291
+ ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
9292
+ : [];
9293
+ if (rejectedValues.length > 0) {
9294
+ const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
9295
+ this.value = serializeMultiSelectValue(reconciled);
9296
+ valueReconciled = true;
9297
+ }
9245
9298
  } else {
9246
- // In single-select mode, this.value should be a string
9247
- const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
9299
+ // In single-select mode, this.value should be a string. Reject
9300
+ // disabled/static options so a programmatic value pointing at a
9301
+ // non-selectable option falls through to the no-match path below
9302
+ // (dispatching auroMenu-selectValueFailure) instead of pinning it.
9303
+ // `hidden` is intentionally NOT excluded: the combobox toggles
9304
+ // `hidden` as its type-ahead filter, so a filtered-out option is
9305
+ // still a valid programmatic selection.
9306
+ const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
9248
9307
 
9249
9308
  if (matchingOption) {
9250
9309
  newSelected = matchingOption;
@@ -9286,8 +9345,9 @@ class AuroMenu extends AuroElement$1 {
9286
9345
  ]
9287
9346
  ]));
9288
9347
 
9289
- // Notify of changes
9290
- if (this.optionSelected !== undefined) {
9348
+ // Notify of changes. Skip when reconciliation just reassigned `value`: the
9349
+ // follow-on update cycle re-runs this branch and fires the events exactly once.
9350
+ if (this.optionSelected !== undefined && !valueReconciled) {
9291
9351
  const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
9292
9352
  selected.forEach((opt) => {
9293
9353
  if (opt.hasAttribute('event')) {
@@ -9500,7 +9560,7 @@ class AuroMenu extends AuroElement$1 {
9500
9560
  const currentSelected = this.optionSelected || [];
9501
9561
 
9502
9562
  if (!currentValue.includes(option.value)) {
9503
- this.value = JSON.stringify([
9563
+ this.value = serializeMultiSelectValue([
9504
9564
  ...currentValue,
9505
9565
  option.value
9506
9566
  ]);
@@ -9526,15 +9586,9 @@ class AuroMenu extends AuroElement$1 {
9526
9586
  */
9527
9587
  handleDeselectState(option) {
9528
9588
  if (this.multiSelect) {
9529
- // Remove this option from array
9589
+ // Remove this option from array; an empty result collapses `value` to undefined.
9530
9590
  const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
9531
-
9532
- // If array is empty after removal, set back to undefined
9533
- if (newFormattedValue && newFormattedValue.length === 0) {
9534
- this.value = undefined;
9535
- } else {
9536
- this.value = JSON.stringify(newFormattedValue);
9537
- }
9591
+ this.value = serializeMultiSelectValue(newFormattedValue);
9538
9592
 
9539
9593
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
9540
9594
  if (this.optionSelected.length === 0) {
@@ -9581,6 +9635,11 @@ class AuroMenu extends AuroElement$1 {
9581
9635
  this.optionSelected = undefined;
9582
9636
  this._index = -1;
9583
9637
 
9638
+ // Clear active option state so a follow-up open/navigation starts fresh
9639
+ // rather than reusing a stale reference from before the reset.
9640
+ this.items?.forEach((item) => item.classList.remove('active'));
9641
+ this.optionActive = undefined;
9642
+
9584
9643
  // Reset UI state
9585
9644
  this.updateItemsState(new Map([
9586
9645
  [
@@ -9990,6 +10049,7 @@ let menuOptionIdCounter = 0;
9990
10049
  * The `auro-menuoption` element provides users a way to define a menu option.
9991
10050
  * @customElement auro-menuoption
9992
10051
  *
10052
+ * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
9993
10053
  * @slot default - The default slot for the menu option text.
9994
10054
  *
9995
10055
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -10019,6 +10079,7 @@ class AuroMenuOption extends AuroElement$1 {
10019
10079
  this.noCheckmark = false;
10020
10080
  this.disabled = false;
10021
10081
  this.noMatch = false;
10082
+ this.persistent = false;
10022
10083
 
10023
10084
  /**
10024
10085
  * @private
@@ -10040,6 +10101,12 @@ class AuroMenuOption extends AuroElement$1 {
10040
10101
  type: Boolean,
10041
10102
  reflect: true
10042
10103
  },
10104
+
10105
+ /**
10106
+ * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
10107
+ *
10108
+ * @deprecated Use the `value` attribute on `auro-menu` instead.
10109
+ */
10043
10110
  selected: {
10044
10111
  type: Boolean,
10045
10112
  reflect: true
@@ -10074,6 +10141,12 @@ class AuroMenuOption extends AuroElement$1 {
10074
10141
  reflect: true,
10075
10142
  attribute: 'nomatch'
10076
10143
  },
10144
+
10145
+ /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
10146
+ persistent: {
10147
+ type: Boolean,
10148
+ reflect: true
10149
+ },
10077
10150
  };
10078
10151
  }
10079
10152