@aurodesignsystem-dev/auro-formkit 0.0.0-pr1101.1 → 0.0.0-pr1104.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 (11) hide show
  1. package/components/combobox/demo/api.js +2 -0
  2. package/components/combobox/demo/api.md +61 -0
  3. package/components/combobox/demo/api.min.js +100 -78
  4. package/components/combobox/demo/index.min.js +3 -0
  5. package/components/menu/demo/api.min.js +3 -0
  6. package/components/menu/demo/index.min.js +3 -0
  7. package/components/menu/dist/index.js +3 -0
  8. package/components/menu/dist/registered.js +3 -0
  9. package/components/select/demo/api.min.js +3 -0
  10. package/components/select/demo/index.min.js +3 -0
  11. package/package.json +1 -1
package/components/combobox/demo/api.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
2
2
 
3
3
  import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
4
+ import { setupExternalSelectionExample } from '../apiExamples/externalSelection.js';
4
5
  import { valueExample } from '../apiExamples/value';
5
6
  import { focusExample } from '../apiExamples/focus';
6
7
  import { inDialogExample } from '../apiExamples/inDialog';
@@ -24,6 +25,7 @@ export function initExamples(initCount) {
24
25
  inDialogExample();
25
26
  resetStateExample();
26
27
  auroMenuLoadingExample();
28
+ setupExternalSelectionExample();
27
29
  } catch (err) {
28
30
  if (initCount <= 20) {
29
31
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/components/combobox/demo/api.md CHANGED
@@ -381,6 +381,67 @@ export async function dynamicMenuExample() {
381
381
  <!-- AURO-GENERATED-CONTENT:END -->
382
382
  </auro-accordion>
383
383
 
384
+ ### Updating Externally
385
+
386
+ This example demonstrates using the <code>updateActiveOption</code> method to set a specific menu option as "active."
387
+
388
+ This is useful for situations like matching IATA codes (sea -> SeaTac airport)
389
+
390
+ <div class="exampleWrapper--ondark">
391
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/externalSelection.html) -->
392
+ <!-- The below content is automatically added from ./../apiExamples/externalSelection.html -->
393
+ <p style="color: white;">
394
+ Type 'a' in the combobox for best testing results :)
395
+ </p>
396
+ <auro-combobox id="externalSelectionExample" layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
397
+ <span slot="ariaLabel.bib.close">Close combobox</span>
398
+ <span slot="ariaLabel.input.clear">Clear All</span>
399
+ <span slot="bib.fullscreen.headline">Bib Header</span>
400
+ <span slot="label">Name</span>
401
+ <auro-menu>
402
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
403
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
404
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
405
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
406
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
407
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
408
+ </auro-menu>
409
+ <span slot="helpText">
410
+ Help text - Lorem ipsum solar lorem ipsum solar
411
+ </span>
412
+ </auro-combobox>
413
+ <!-- AURO-GENERATED-CONTENT:END -->
414
+ </div>
415
+ <auro-accordion alignRight>
416
+ <span slot="trigger">See code</span>
417
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/externalSelection.html) -->
418
+ <!-- The below code snippet is automatically added from ./../apiExamples/externalSelection.html -->
419
+
420
+ ```html
421
+ <p style="color: white;">
422
+ Type 'a' in the combobox for best testing results :)
423
+ </p>
424
+ <auro-combobox id="externalSelectionExample" layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
425
+ <span slot="ariaLabel.bib.close">Close combobox</span>
426
+ <span slot="ariaLabel.input.clear">Clear All</span>
427
+ <span slot="bib.fullscreen.headline">Bib Header</span>
428
+ <span slot="label">Name</span>
429
+ <auro-menu>
430
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
431
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
432
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
433
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
434
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
435
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
436
+ </auro-menu>
437
+ <span slot="helpText">
438
+ Help text - Lorem ipsum solar lorem ipsum solar
439
+ </span>
440
+ </auro-combobox>
441
+ ```
442
+ <!-- AURO-GENERATED-CONTENT:END -->
443
+ </auro-accordion>
444
+
384
445
  ### Property Examples
385
446
 
386
447
  #### disabled
package/components/combobox/demo/api.min.js CHANGED
@@ -141,84 +141,6 @@ async function dynamicMenuExample() {
141
141
  }
142
142
  }
143
143
 
144
- function valueExample() {
145
- const valueExample = document.querySelector('#valueExample');
146
-
147
- document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
148
- valueExample.value = 'Oranges';
149
- });
150
-
151
- document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
152
- valueExample.value = 'Dragon Fruit';
153
- });
154
-
155
- document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
156
- valueExample.value = undefined;
157
- });
158
- }
159
-
160
- function focusExample() {
161
- const focusExample = document.querySelector('#focusExample');
162
- const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
163
-
164
- focusExampleBtnElem.addEventListener('click', () => {
165
- focusExample.focus();
166
- });
167
- }
168
-
169
- function inDialogExample() {
170
- document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
171
- const dialog = document.querySelector("#combobox-dialog");
172
- dialog.open = true;
173
- });
174
- }
175
-
176
- function resetStateExample() {
177
- const elem = document.querySelector('#resetStateExample');
178
-
179
- document.querySelector('#resetStateBtn').addEventListener('click', () => {
180
- elem.reset();
181
- });
182
- }
183
-
184
- function auroMenuLoadingExample() {
185
- const combobox = document.querySelector("#loadingExample");
186
- const menu = document.querySelector("#loadingExampleComboboxMenu");
187
-
188
- const emptyMenu = () => {
189
- const menuoptions = menu.querySelectorAll('auro-menuoption');
190
- menuoptions.forEach(mo => menu.removeChild(mo));
191
- };
192
-
193
- const fillMenu = () => {
194
- menu.innerHTML += `
195
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
196
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
197
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
198
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
199
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
200
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
201
- `;
202
- };
203
-
204
- const load = () => {
205
- clearTimeout(load.id);
206
- emptyMenu();
207
- menu.setAttribute('loading', 'loading');
208
- load.id = setTimeout(() => {
209
- menu.removeAttribute('loading');
210
- fillMenu();
211
- }, 1000);
212
-
213
- };
214
-
215
- combobox.addEventListener("inputValue", (e) => {
216
- if (e.target.inputValue && e.target.value !== e.target.inputValue) {
217
- load();
218
- }
219
- });
220
- }
221
-
222
144
  /**
223
145
  * @license
224
146
  * Copyright 2019 Google LLC
@@ -17612,6 +17534,102 @@ class AuroCombobox extends AuroElement$1 {
17612
17534
  }
17613
17535
  }
17614
17536
 
17537
+ /**
17538
+ * Sets up demo external selection in the combobox.
17539
+ */
17540
+ function setupExternalSelectionExample() {
17541
+
17542
+ /** @type {AuroCombobox} */
17543
+ const combobox = document.getElementById('externalSelectionExample');
17544
+
17545
+ combobox.addEventListener('input', () => {
17546
+ // Perform whatever matching logic you need here
17547
+
17548
+ // This comes from your custom code, for example matching SEA to SeaTac IATA code.
17549
+ // This matches "peaches" as configured.
17550
+ const matchingMenuOption = 2;
17551
+ combobox.updateActiveOption(matchingMenuOption);
17552
+ });
17553
+ }
17554
+
17555
+ function valueExample() {
17556
+ const valueExample = document.querySelector('#valueExample');
17557
+
17558
+ document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
17559
+ valueExample.value = 'Oranges';
17560
+ });
17561
+
17562
+ document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
17563
+ valueExample.value = 'Dragon Fruit';
17564
+ });
17565
+
17566
+ document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
17567
+ valueExample.value = undefined;
17568
+ });
17569
+ }
17570
+
17571
+ function focusExample() {
17572
+ const focusExample = document.querySelector('#focusExample');
17573
+ const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
17574
+
17575
+ focusExampleBtnElem.addEventListener('click', () => {
17576
+ focusExample.focus();
17577
+ });
17578
+ }
17579
+
17580
+ function inDialogExample() {
17581
+ document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
17582
+ const dialog = document.querySelector("#combobox-dialog");
17583
+ dialog.open = true;
17584
+ });
17585
+ }
17586
+
17587
+ function resetStateExample() {
17588
+ const elem = document.querySelector('#resetStateExample');
17589
+
17590
+ document.querySelector('#resetStateBtn').addEventListener('click', () => {
17591
+ elem.reset();
17592
+ });
17593
+ }
17594
+
17595
+ function auroMenuLoadingExample() {
17596
+ const combobox = document.querySelector("#loadingExample");
17597
+ const menu = document.querySelector("#loadingExampleComboboxMenu");
17598
+
17599
+ const emptyMenu = () => {
17600
+ const menuoptions = menu.querySelectorAll('auro-menuoption');
17601
+ menuoptions.forEach(mo => menu.removeChild(mo));
17602
+ };
17603
+
17604
+ const fillMenu = () => {
17605
+ menu.innerHTML += `
17606
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
17607
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
17608
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
17609
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
17610
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
17611
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
17612
+ `;
17613
+ };
17614
+
17615
+ const load = () => {
17616
+ clearTimeout(load.id);
17617
+ emptyMenu();
17618
+ menu.setAttribute('loading', 'loading');
17619
+ load.id = setTimeout(() => {
17620
+ menu.removeAttribute('loading');
17621
+ fillMenu();
17622
+ }, 1000);
17623
+
17624
+ };
17625
+
17626
+ combobox.addEventListener("inputValue", (e) => {
17627
+ if (e.target.inputValue && e.target.value !== e.target.inputValue) {
17628
+ load();
17629
+ }
17630
+ });
17631
+ }
17632
+
17615
17633
  var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-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);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{display:block;vertical-align:middle;line-height:0}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
17616
17634
 
17617
17635
  var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
@@ -18228,6 +18246,9 @@ class AuroMenu extends AuroElement$1 {
18228
18246
  case "ArrowUp":
18229
18247
  this.navigateOptions('up');
18230
18248
  break;
18249
+ case "Tab":
18250
+ this.makeSelection();
18251
+ break;
18231
18252
  case "Enter":
18232
18253
  this.makeSelection();
18233
18254
  break;
@@ -19105,6 +19126,7 @@ function initExamples(initCount) {
19105
19126
  inDialogExample();
19106
19127
  resetStateExample();
19107
19128
  auroMenuLoadingExample();
19129
+ setupExternalSelectionExample();
19108
19130
  } catch (err) {
19109
19131
  if (initCount <= 20) {
19110
19132
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/components/combobox/demo/index.min.js CHANGED
@@ -18030,6 +18030,9 @@ class AuroMenu extends AuroElement$1 {
18030
18030
  case "ArrowUp":
18031
18031
  this.navigateOptions('up');
18032
18032
  break;
18033
+ case "Tab":
18034
+ this.makeSelection();
18035
+ break;
18033
18036
  case "Enter":
18034
18037
  this.makeSelection();
18035
18038
  break;
package/components/menu/demo/api.min.js CHANGED
@@ -867,6 +867,9 @@ class AuroMenu extends AuroElement$1 {
867
867
  case "ArrowUp":
868
868
  this.navigateOptions('up');
869
869
  break;
870
+ case "Tab":
871
+ this.makeSelection();
872
+ break;
870
873
  case "Enter":
871
874
  this.makeSelection();
872
875
  break;
package/components/menu/demo/index.min.js CHANGED
@@ -827,6 +827,9 @@ class AuroMenu extends AuroElement$1 {
827
827
  case "ArrowUp":
828
828
  this.navigateOptions('up');
829
829
  break;
830
+ case "Tab":
831
+ this.makeSelection();
832
+ break;
830
833
  case "Enter":
831
834
  this.makeSelection();
832
835
  break;
package/components/menu/dist/index.js CHANGED
@@ -834,6 +834,9 @@ class AuroMenu extends AuroElement$1 {
834
834
  case "ArrowUp":
835
835
  this.navigateOptions('up');
836
836
  break;
837
+ case "Tab":
838
+ this.makeSelection();
839
+ break;
837
840
  case "Enter":
838
841
  this.makeSelection();
839
842
  break;
package/components/menu/dist/registered.js CHANGED
@@ -793,6 +793,9 @@ class AuroMenu extends AuroElement$1 {
793
793
  case "ArrowUp":
794
794
  this.navigateOptions('up');
795
795
  break;
796
+ case "Tab":
797
+ this.makeSelection();
798
+ break;
796
799
  case "Enter":
797
800
  this.makeSelection();
798
801
  break;
package/components/select/demo/api.min.js CHANGED
@@ -9761,6 +9761,9 @@ class AuroMenu extends AuroElement$4 {
9761
9761
  case "ArrowUp":
9762
9762
  this.navigateOptions('up');
9763
9763
  break;
9764
+ case "Tab":
9765
+ this.makeSelection();
9766
+ break;
9764
9767
  case "Enter":
9765
9768
  this.makeSelection();
9766
9769
  break;
package/components/select/demo/index.min.js CHANGED
@@ -9669,6 +9669,9 @@ class AuroMenu extends AuroElement$4 {
9669
9669
  case "ArrowUp":
9670
9670
  this.navigateOptions('up');
9671
9671
  break;
9672
+ case "Tab":
9673
+ this.makeSelection();
9674
+ break;
9672
9675
  case "Enter":
9673
9676
  this.makeSelection();
9674
9677
  break;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr1101.1",
3
+ "version": "0.0.0-pr1104.0",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {