@aurodesignsystem-dev/auro-formkit 0.0.0-pr1145.1 → 0.0.0-pr1156.0

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 (32) hide show
  1. package/components/checkbox/demo/api.min.js +2 -66
  2. package/components/checkbox/demo/index.min.js +2 -66
  3. package/components/checkbox/dist/index.js +2 -66
  4. package/components/checkbox/dist/registered.js +2 -66
  5. package/components/combobox/demo/api.md +37 -229
  6. package/components/combobox/demo/api.min.js +6 -155
  7. package/components/combobox/demo/index.md +0 -104
  8. package/components/combobox/demo/index.min.js +6 -155
  9. package/components/combobox/dist/auro-combobox.d.ts +1 -18
  10. package/components/combobox/dist/index.js +6 -155
  11. package/components/combobox/dist/registered.js +6 -155
  12. package/components/counter/demo/api.min.js +2 -66
  13. package/components/counter/demo/index.min.js +2 -66
  14. package/components/counter/dist/index.js +2 -66
  15. package/components/counter/dist/registered.js +2 -66
  16. package/components/datepicker/demo/api.min.js +5 -133
  17. package/components/datepicker/demo/index.min.js +5 -133
  18. package/components/datepicker/dist/index.js +5 -133
  19. package/components/datepicker/dist/registered.js +5 -133
  20. package/components/input/demo/api.min.js +3 -67
  21. package/components/input/demo/index.min.js +3 -67
  22. package/components/input/dist/index.js +3 -67
  23. package/components/input/dist/registered.js +3 -67
  24. package/components/radio/demo/api.min.js +2 -66
  25. package/components/radio/demo/index.min.js +2 -66
  26. package/components/radio/dist/index.js +2 -66
  27. package/components/radio/dist/registered.js +2 -66
  28. package/components/select/demo/api.min.js +3 -67
  29. package/components/select/demo/index.min.js +3 -67
  30. package/components/select/dist/index.js +3 -67
  31. package/components/select/dist/registered.js +3 -67
  32. package/package.json +1 -1
@@ -5,45 +5,43 @@
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Modifiers | Type | Default | Description |
9
- |---------------------------------------|---------------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
10
- | [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | false | 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
- | [behavior](#behavior) | `behavior` | | `string` | "suggestion" | Sets the behavior of the combobox, "filter" or "suggestion".<br />"filter" requires the user to select an option from the menu.<br />"suggestion" allows the user to enter a value not present in the menu options. |
13
- | [checkmark](#checkmark) | `checkmark` | | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
14
- | [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the combobox. |
15
- | [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
16
- | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
17
- | [format](#format) | `format` | | `string` | | Specifies the input mask format. |
18
- | [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. |
19
- | [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. |
20
- | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
21
- | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
22
- | [layout](#layout) | | | `string` | "classic" | |
23
- | [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
24
- | [msgSelectionMissing](#msgSelectionMissing) | | | `string` | "Please select an option." | |
25
- | [noFilter](#noFilter) | `noFilter` | | `boolean` | false | If set, combobox will not filter menuoptions based on input. |
26
- | [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`. |
27
- | [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
28
- | [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
29
- | [onDark](#onDark) | `onDark` | | `boolean` | | If declared, onDark styles will be applied to the trigger. |
30
- | [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. |
31
- | [persistInput](#persistInput) | `persistInput` | | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
32
- | [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. |
33
- | [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" |
34
- | [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
35
- | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
36
- | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
37
- | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
38
- | [setCustomValidityValueMissingFilter](#setCustomValidityValueMissingFilter) | `setCustomValidityValueMissingFilter` | | `string` | | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
39
- | [shape](#shape) | | | `string` | "classic" | |
40
- | [shift](#shift) | `shift` | | `boolean` | "false" | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
41
- | [size](#size) | | | `string` | "xl" | |
42
- | [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
43
- | [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on auro-input. |
44
- | [typedValue](#typedValue) | `typedValue` | | `string` | "undefined" | Specifies the value of the input element within the combobox. |
45
- | [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
46
- | [value](#value) | `value` | | `string` | "undefined" | Value selected for the dropdown menu. |
8
+ | Property | Attribute | Modifiers | Type | Default | Description |
9
+ |---------------------------------|---------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
10
+ | [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | false | 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` | false | When attribute is present auro-menu will apply check marks to selected options. |
13
+ | [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the combobox. |
14
+ | [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
15
+ | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
16
+ | [format](#format) | `format` | | `string` | | Specifies the input mask format. |
17
+ | [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. |
18
+ | [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. |
19
+ | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
20
+ | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
21
+ | [layout](#layout) | | | `string` | "classic" | |
22
+ | [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
23
+ | [msgSelectionMissing](#msgSelectionMissing) | | | `string` | "Please select an option." | |
24
+ | [noFilter](#noFilter) | `noFilter` | | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
25
+ | [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`. |
26
+ | [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
27
+ | [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
28
+ | [onDark](#onDark) | `onDark` | | `boolean` | | If declared, onDark styles will be applied to the trigger. |
29
+ | [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. |
30
+ | [persistInput](#persistInput) | `persistInput` | | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
31
+ | [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. |
32
+ | [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" |
33
+ | [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
34
+ | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
35
+ | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
36
+ | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
37
+ | [shape](#shape) | | | `string` | "classic" | |
38
+ | [shift](#shift) | `shift` | | `boolean` | "false" | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
39
+ | [size](#size) | | | `string` | "xl" | |
40
+ | [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
41
+ | [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on auro-input. |
42
+ | [typedValue](#typedValue) | `typedValue` | | `string` | "undefined" | Specifies the value of the input element within the combobox. |
43
+ | [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
44
+ | [value](#value) | `value` | | `string` | "undefined" | Value selected for the dropdown menu. |
47
45
 
48
46
  ## Methods
49
47
 
@@ -160,107 +158,6 @@
160
158
  <!-- AURO-GENERATED-CONTENT:END -->
161
159
  </auro-accordion>
162
160
 
163
- ### Behavior
164
-
165
- There are two behaviors available for the combo box: suggestion and filter.
166
- The default behavior is "suggestion".
167
-
168
- #### Suggestion
169
-
170
- With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input
171
-
172
- <div class="exampleWrapper">
173
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/suggestion.html) -->
174
- <!-- The below content is automatically added from ./../apiExamples/suggestion.html -->
175
- <auro-combobox behavior="suggestion">
176
- <span slot="ariaLabel.bib.close">Close combobox</span>
177
- <span slot="ariaLabel.input.clear">Clear All</span>
178
- <span slot="bib.fullscreen.headline">Bib Header</span>
179
- <span slot="label">Name</span>
180
- <auro-menu>
181
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
182
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
183
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
184
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
185
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
186
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
187
- </auro-menu>
188
- </auro-combobox>
189
- <!-- AURO-GENERATED-CONTENT:END -->
190
- </div>
191
- <auro-accordion alignRight>
192
- <span slot="trigger">See code</span>
193
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/suggestion.html) -->
194
- <!-- The below code snippet is automatically added from ./../apiExamples/suggestion.html -->
195
-
196
- ```html
197
- <auro-combobox behavior="suggestion">
198
- <span slot="ariaLabel.bib.close">Close combobox</span>
199
- <span slot="ariaLabel.input.clear">Clear All</span>
200
- <span slot="bib.fullscreen.headline">Bib Header</span>
201
- <span slot="label">Name</span>
202
- <auro-menu>
203
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
204
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
205
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
206
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
207
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
208
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
209
- </auro-menu>
210
- </auro-combobox>
211
- ```
212
- <!-- AURO-GENERATED-CONTENT:END -->
213
- </auro-accordion>
214
-
215
- #### Filter
216
-
217
- With the filter behavior, the menu options are displayed to the user, and the user is required to choose one of the menu options in order for the input to be considered valid.
218
-
219
- The `setCustomValidityValueMissingFilter` attribute is also available to display a custom message to the user when this validation check fails.
220
-
221
- <div class="exampleWrapper">
222
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/filter.html) -->
223
- <!-- The below content is automatically added from ./../apiExamples/filter.html -->
224
- <auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
225
- <span slot="ariaLabel.bib.close">Close combobox</span>
226
- <span slot="ariaLabel.input.clear">Clear All</span>
227
- <span slot="bib.fullscreen.headline">Bib Header</span>
228
- <span slot="label">Name</span>
229
- <auro-menu>
230
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
231
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
232
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
233
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
234
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
235
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
236
- </auro-menu>
237
- </auro-combobox>
238
- <!-- AURO-GENERATED-CONTENT:END -->
239
- </div>
240
- <auro-accordion alignRight>
241
- <span slot="trigger">See code</span>
242
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/filter.html) -->
243
- <!-- The below code snippet is automatically added from ./../apiExamples/filter.html -->
244
-
245
- ```html
246
- <auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
247
- <span slot="ariaLabel.bib.close">Close combobox</span>
248
- <span slot="ariaLabel.input.clear">Clear All</span>
249
- <span slot="bib.fullscreen.headline">Bib Header</span>
250
- <span slot="label">Name</span>
251
- <auro-menu>
252
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
253
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
254
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
255
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
256
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
257
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
258
- </auro-menu>
259
- </auro-combobox>
260
- ```
261
- <!-- AURO-GENERATED-CONTENT:END -->
262
- </auro-accordion>
263
-
264
161
  ### Dynamic Menu
265
162
 
266
163
  This example demonstrates a data driven combobox. The data is used to populate the `auro-menu`. In this example, each time the input's value changes, the data is updated and the menu is recreated.
@@ -282,7 +179,6 @@ The menu in this example was populated from data from a country/city API. To kee
282
179
  noFilter
283
180
  persistInput
284
181
  dvInputOnly
285
- setCustomValidityValueMissing="Please select an option from the list."
286
182
  required>
287
183
  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
288
184
  <span slot="label">First</span>
@@ -303,7 +199,6 @@ The menu in this example was populated from data from a country/city API. To kee
303
199
  noFilter
304
200
  persistInput
305
201
  dvInputOnly
306
- setCustomValidityValueMissing="Please select an option from the list."
307
202
  required>
308
203
  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
309
204
  <span slot="label">Second</span>
@@ -340,7 +235,6 @@ The menu in this example was populated from data from a country/city API. To kee
340
235
  noFilter
341
236
  persistInput
342
237
  dvInputOnly
343
- setCustomValidityValueMissing="Please select an option from the list."
344
238
  required>
345
239
  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
346
240
  <span slot="label">First</span>
@@ -361,7 +255,6 @@ The menu in this example was populated from data from a country/city API. To kee
361
255
  noFilter
362
256
  persistInput
363
257
  dvInputOnly
364
- setCustomValidityValueMissing="Please select an option from the list."
365
258
  required>
366
259
  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
367
260
  <span slot="label">Second</span>
@@ -507,91 +400,6 @@ export async function dynamicMenuExample() {
507
400
  <!-- AURO-GENERATED-CONTENT:END -->
508
401
  </auro-accordion>
509
402
 
510
- ### Persistent Input
511
-
512
- The `persistInput` attribute allows you to set the combo box to persist the value of the input regardless of the current value set for the combo box.
513
-
514
- A persistent input is typically used in conjunction with display values to show the actual value of the selected option to the user when the input is not focused.
515
-
516
- This is helpful for things like dynamic menus where you want the user to be able to continue their search where they left off but display a full selected value when the input is not focused.
517
-
518
- _*Note:*_ When using `persistInput` with the `required` attribute, you must also pass an error message for when there isn't a valid value but the user has typed something in the input to the `setCustomValidityValueMissing` attribute.
519
-
520
- <div class="exampleWrapper">
521
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persistInput.html) -->
522
- <!-- The below content is automatically added from ./../apiExamples/persistInput.html -->
523
- <auro-combobox
524
- required
525
- persistInput
526
- setCustomValidityValueMissing="Please select an option from the list."
527
- >
528
- <span slot="bib.fullscreen.headline">Persistant Input</span>
529
- <span slot="label">Persistant Input</span>
530
- <auro-menu>
531
- <auro-menuoption value="Apples" id="option-0">
532
- Apples
533
- <div slot="displayValue">Apples</div>
534
- </auro-menuoption>
535
- <auro-menuoption value="Oranges" id="option-1">
536
- Oranges
537
- <div slot="displayValue">Oranges</div>
538
- </auro-menuoption>
539
- <auro-menuoption value="Peaches" id="option-2">
540
- Peaches
541
- <div slot="displayValue">Peaches</div>
542
- </auro-menuoption>
543
- <auro-menuoption value="Grapes" id="option-3">
544
- Grapes
545
- <div slot="displayValue">Grapes</div>
546
- </auro-menuoption>
547
- <auro-menuoption value="Cherries" id="option-4">
548
- Cherries
549
- <div slot="displayValue">Cherries</div>
550
- </auro-menuoption>
551
- </auro-menu>
552
- </auro-combobox>
553
- <!-- AURO-GENERATED-CONTENT:END -->
554
- </div>
555
- <auro-accordion alignRight>
556
- <span slot="trigger">See code</span>
557
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persistInput.html) -->
558
- <!-- The below code snippet is automatically added from ./../apiExamples/persistInput.html -->
559
-
560
- ```html
561
- <auro-combobox
562
- required
563
- persistInput
564
- setCustomValidityValueMissing="Please select an option from the list."
565
- >
566
- <span slot="bib.fullscreen.headline">Persistant Input</span>
567
- <span slot="label">Persistant Input</span>
568
- <auro-menu>
569
- <auro-menuoption value="Apples" id="option-0">
570
- Apples
571
- <div slot="displayValue">Apples</div>
572
- </auro-menuoption>
573
- <auro-menuoption value="Oranges" id="option-1">
574
- Oranges
575
- <div slot="displayValue">Oranges</div>
576
- </auro-menuoption>
577
- <auro-menuoption value="Peaches" id="option-2">
578
- Peaches
579
- <div slot="displayValue">Peaches</div>
580
- </auro-menuoption>
581
- <auro-menuoption value="Grapes" id="option-3">
582
- Grapes
583
- <div slot="displayValue">Grapes</div>
584
- </auro-menuoption>
585
- <auro-menuoption value="Cherries" id="option-4">
586
- Cherries
587
- <div slot="displayValue">Cherries</div>
588
- </auro-menuoption>
589
- </auro-menu>
590
- </auro-combobox>
591
- ```
592
- <!-- AURO-GENERATED-CONTENT:END -->
593
- </auro-accordion>
594
-
595
403
  ### Updating Externally
596
404
 
597
405
  This example demonstrates using the <code>updateActiveOption</code> method to set a specific menu option as "active."