@aurodesignsystem-dev/auro-formkit 0.0.0-pr1600.3 → 0.0.0-pr1602.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 (64) 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/customize.min.js +110 -4
  7. package/components/combobox/demo/getting-started.md +49 -0
  8. package/components/combobox/demo/getting-started.min.js +129 -4
  9. package/components/combobox/demo/index.min.js +110 -4
  10. package/components/combobox/dist/auro-combobox.d.ts +22 -0
  11. package/components/combobox/dist/index.js +94 -4
  12. package/components/combobox/dist/registered.js +94 -4
  13. package/components/counter/demo/api.md +2 -0
  14. package/components/counter/demo/customize.min.js +320 -22
  15. package/components/counter/demo/getting-started.html +3 -1
  16. package/components/counter/demo/getting-started.md +49 -0
  17. package/components/counter/demo/getting-started.min.js +8766 -0
  18. package/components/counter/demo/index.min.js +320 -22
  19. package/components/counter/dist/auro-counter-group.d.ts +6 -0
  20. package/components/counter/dist/auro-counter.d.ts +6 -0
  21. package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +1 -0
  22. package/components/counter/dist/index.js +320 -22
  23. package/components/counter/dist/registered.js +320 -22
  24. package/components/datepicker/demo/customize.min.js +3 -3
  25. package/components/datepicker/demo/getting-started.html +3 -1
  26. package/components/datepicker/demo/getting-started.md +39 -0
  27. package/components/datepicker/demo/getting-started.min.js +37626 -0
  28. package/components/datepicker/demo/index.min.js +3 -3
  29. package/components/datepicker/dist/index.js +3 -3
  30. package/components/datepicker/dist/registered.js +3 -3
  31. package/components/dropdown/demo/customize.min.js +1 -1
  32. package/components/dropdown/demo/getting-started.min.js +2 -2
  33. package/components/dropdown/demo/index.min.js +1 -1
  34. package/components/dropdown/dist/index.js +1 -1
  35. package/components/dropdown/dist/registered.js +1 -1
  36. package/components/form/demo/customize.min.js +444 -35
  37. package/components/form/demo/getting-started.min.js +444 -35
  38. package/components/form/demo/index.min.js +444 -35
  39. package/components/form/demo/registerDemoDeps.min.js +438 -34
  40. package/components/form/dist/index.js +6 -1
  41. package/components/form/dist/registered.js +6 -1
  42. package/components/input/demo/customize.md +0 -37
  43. package/components/input/demo/customize.min.js +1 -10
  44. package/components/input/demo/getting-started.md +33 -0
  45. package/components/input/demo/getting-started.min.js +21 -1
  46. package/components/input/demo/index.min.js +1 -1
  47. package/components/input/dist/index.js +1 -1
  48. package/components/input/dist/registered.js +1 -1
  49. package/components/menu/demo/index.min.js +16 -0
  50. package/components/menu/dist/index.js +16 -0
  51. package/components/menu/dist/registered.js +16 -0
  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/customize.min.js +18 -2
  58. package/components/select/demo/getting-started.md +49 -0
  59. package/components/select/demo/getting-started.min.js +40 -3
  60. package/components/select/demo/index.min.js +18 -2
  61. package/components/select/dist/index.js +2 -2
  62. package/components/select/dist/registered.js +2 -2
  63. package/custom-elements.json +606 -566
  64. package/package.json +1 -1
@@ -677,7 +677,12 @@ class AuroForm extends LitElement {
677
677
  */
678
678
  reset() {
679
679
  const previousValue = this.value;
680
- this._elements.forEach((element) => element.reset());
680
+ this._elements.forEach((element) => {
681
+ // Guard against a registered element that does not implement reset() so one missing method cannot abort the entire form reset.
682
+ if (typeof element.reset === 'function') {
683
+ element.reset();
684
+ }
685
+ });
681
686
 
682
687
  this.updateComplete.then(() => {
683
688
  this.initializeState();
@@ -677,7 +677,12 @@ class AuroForm extends LitElement {
677
677
  */
678
678
  reset() {
679
679
  const previousValue = this.value;
680
- this._elements.forEach((element) => element.reset());
680
+ this._elements.forEach((element) => {
681
+ // Guard against a registered element that does not implement reset() so one missing method cannot abort the entire form reset.
682
+ if (typeof element.reset === 'function') {
683
+ element.reset();
684
+ }
685
+ });
681
686
 
682
687
  this.updateComplete.then(() => {
683
688
  this.initializeState();
@@ -1432,43 +1432,6 @@
1432
1432
  </auro-accordion>
1433
1433
  </section>
1434
1434
  <section>
1435
- <auro-header level="2" id="resetState">Reset State</auro-header>
1436
- <p>Use the <code>reset()</code> method to reset the <code>&lt;auro-input&gt;</code>'s <code>value</code> and <code>validity</code> state. Doing so will preserve all other attributes and properties.</p>
1437
- <div class="exampleWrapper">
1438
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/reset-state.html) -->
1439
- <!-- The below content is automatically added from ../apiExamples/reset-state.html -->
1440
- <auro-button id="resetStateBtn">Reset</auro-button>
1441
- <br /><br />
1442
- <auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
1443
- <span slot="label">Full Name</span>
1444
- <span slot="helpText">Please enter your full name.</span>
1445
- </auro-input>
1446
- <!-- AURO-GENERATED-CONTENT:END -->
1447
- </div>
1448
- <auro-accordion alignRight>
1449
- <span slot="trigger">See code</span>
1450
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/reset-state.html) -->
1451
- <!-- The below code snippet is automatically added from ../apiExamples/reset-state.html -->
1452
- <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
1453
- &lt;br /&gt;&lt;br /&gt;
1454
- &lt;auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!"&gt;
1455
- &lt;span slot="label"&gt;Full Name&lt;/span&gt;
1456
- &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
1457
- &lt;/auro-input&gt;</code></pre>
1458
- <!-- AURO-GENERATED-CONTENT:END -->
1459
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/reset-state.js) -->
1460
- <!-- The below code snippet is automatically added from ../apiExamples/reset-state.js -->
1461
- <pre class="language-js"><code class="language-js">export function resetStateExample() {
1462
- const elem = document.querySelector('#resetStateExample');
1463
- ​
1464
- document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
1465
- elem.reset();
1466
- });
1467
- }</code></pre>
1468
- <!-- AURO-GENERATED-CONTENT:END -->
1469
- </auro-accordion>
1470
- </section>
1471
- <section>
1472
1435
  <auro-header level="2" id="swapValues">Swapping Values Between Inputs</auro-header>
1473
1436
  <p>Example illustrates using a JavaScript function attached to an <code>auro-button</code> component <code>click</code> event to swap the values of two <code>auro-input</code> elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.</p>
1474
1437
  <div class="exampleWrapper">
@@ -12396,7 +12396,7 @@ class AuroHelpText extends i$3 {
12396
12396
  }
12397
12397
  }
12398
12398
 
12399
- var formkitVersion = '202609011635';
12399
+ var formkitVersion = '202609021726';
12400
12400
 
12401
12401
  /**
12402
12402
  * @license
@@ -13212,14 +13212,6 @@ function setReadonlyValue() {
13212
13212
  });
13213
13213
  }
13214
13214
 
13215
- function resetStateExample() {
13216
- const elem = document.querySelector('#resetStateExample');
13217
-
13218
- document.querySelector('#resetStateBtn').addEventListener('click', () => {
13219
- elem.reset();
13220
- });
13221
- }
13222
-
13223
13215
  function swapInputValues() {
13224
13216
  const btn = document.querySelector('#swapExampleBtn');
13225
13217
  const inputOne = document.querySelector('#swapExampleLeft');
@@ -13244,7 +13236,6 @@ function initExamples(initCount) {
13244
13236
  customError();
13245
13237
  setReadonlyValue();
13246
13238
  swapInputValues();
13247
- resetStateExample();
13248
13239
  } catch (error) {
13249
13240
  if (initCount <= 20) {
13250
13241
  setTimeout(() => {
@@ -317,6 +317,39 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
317
317
  <p>Programmatically moves focus to the input element.</p>
318
318
  <auro-header level="3" id="reset">reset()</auro-header>
319
319
  <p>Resets the component to its initial state, clearing the value and validation state.</p>
320
+ <div class="exampleWrapper">
321
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
322
+ <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
323
+ <auro-button id="resetStateBtn">Reset</auro-button>
324
+ <br /><br />
325
+ <auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
326
+ <span slot="label">Full Name</span>
327
+ <span slot="helpText">Please enter your full name.</span>
328
+ </auro-input>
329
+ <!-- AURO-GENERATED-CONTENT:END -->
330
+ </div>
331
+ <auro-accordion alignRight>
332
+ <span slot="trigger">See code</span>
333
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
334
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
335
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
336
+ &lt;br /&gt;&lt;br /&gt;
337
+ &lt;auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!"&gt;
338
+ &lt;span slot="label"&gt;Full Name&lt;/span&gt;
339
+ &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
340
+ &lt;/auro-input&gt;</code></pre>
341
+ <!-- AURO-GENERATED-CONTENT:END -->
342
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
343
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
344
+ <pre class="language-js"><code class="language-js">export function resetStateExample() {
345
+ const elem = document.querySelector('#resetStateExample');
346
+ ​
347
+ document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
348
+ elem.reset();
349
+ });
350
+ }</code></pre>
351
+ <!-- AURO-GENERATED-CONTENT:END -->
352
+ </auro-accordion>
320
353
  <auro-header level="3" id="validate">validate()</auro-header>
321
354
  <p>Triggers validation on the component. Pass <code>true</code> to force validation even when <code>noValidate</code> is set.</p>
322
355
  </section>
@@ -12396,7 +12396,7 @@ class AuroHelpText extends i$3 {
12396
12396
  }
12397
12397
  }
12398
12398
 
12399
- var formkitVersion = '202609011635';
12399
+ var formkitVersion = '202609021726';
12400
12400
 
12401
12401
  /**
12402
12402
  * @license
@@ -13186,10 +13186,30 @@ class AuroInput extends BaseInput {
13186
13186
  }
13187
13187
  }
13188
13188
 
13189
+ function resetStateExample() {
13190
+ const elem = document.querySelector('#resetStateExample');
13191
+
13192
+ document.querySelector('#resetStateBtn').addEventListener('click', () => {
13193
+ elem.reset();
13194
+ });
13195
+ }
13196
+
13189
13197
  AuroInput.register();
13190
13198
  AuroInput.register('custom-input');
13191
13199
 
13192
13200
  function initExamples(initCount) {
13201
+ initCount = initCount || 0;
13202
+
13203
+ try {
13204
+ resetStateExample();
13205
+ } catch (err) {
13206
+ if (initCount <= 20) {
13207
+ // setTimeout handles the case where example content is rendered after this function runs.
13208
+ setTimeout(() => {
13209
+ initExamples(initCount + 1);
13210
+ }, 100);
13211
+ }
13212
+ }
13193
13213
  }
13194
13214
 
13195
13215
  export { initExamples };
@@ -12396,7 +12396,7 @@ class AuroHelpText extends i$3 {
12396
12396
  }
12397
12397
  }
12398
12398
 
12399
- var formkitVersion = '202609011635';
12399
+ var formkitVersion = '202609021726';
12400
12400
 
12401
12401
  /**
12402
12402
  * @license
@@ -12338,7 +12338,7 @@ class AuroHelpText extends LitElement {
12338
12338
  }
12339
12339
  }
12340
12340
 
12341
- var formkitVersion = '202609011635';
12341
+ var formkitVersion = '202609021726';
12342
12342
 
12343
12343
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12344
12344
  // See LICENSE in the project root for license information.
@@ -12338,7 +12338,7 @@ class AuroHelpText extends LitElement {
12338
12338
  }
12339
12339
  }
12340
12340
 
12341
- var formkitVersion = '202609011635';
12341
+ var formkitVersion = '202609021726';
12342
12342
 
12343
12343
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12344
12344
  // See LICENSE in the project root for license information.
@@ -1305,6 +1305,22 @@ class AuroMenu extends AuroElement {
1305
1305
  this.value = undefined;
1306
1306
  this._selectedKey = undefined;
1307
1307
  this._index = -1;
1308
+
1309
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
1310
+ // reactive properties above normally schedules updated() → updateItemsState,
1311
+ // but that only runs when a property actually changes. If an option still
1312
+ // carries a stale `selected`/`aria-selected` attribute while these
1313
+ // properties are already undefined (e.g. options were rebuilt after a value
1314
+ // was set), no re-render fires and the option keeps rendering as selected.
1315
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
1316
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
1317
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
1318
+ this.updateItemsState(new Map([
1319
+ [
1320
+ 'optionSelected',
1321
+ true
1322
+ ]
1323
+ ]));
1308
1324
  }
1309
1325
 
1310
1326
  /**
@@ -1312,6 +1312,22 @@ class AuroMenu extends AuroElement {
1312
1312
  this.value = undefined;
1313
1313
  this._selectedKey = undefined;
1314
1314
  this._index = -1;
1315
+
1316
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
1317
+ // reactive properties above normally schedules updated() → updateItemsState,
1318
+ // but that only runs when a property actually changes. If an option still
1319
+ // carries a stale `selected`/`aria-selected` attribute while these
1320
+ // properties are already undefined (e.g. options were rebuilt after a value
1321
+ // was set), no re-render fires and the option keeps rendering as selected.
1322
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
1323
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
1324
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
1325
+ this.updateItemsState(new Map([
1326
+ [
1327
+ 'optionSelected',
1328
+ true
1329
+ ]
1330
+ ]));
1315
1331
  }
1316
1332
 
1317
1333
  /**
@@ -1271,6 +1271,22 @@ class AuroMenu extends AuroElement {
1271
1271
  this.value = undefined;
1272
1272
  this._selectedKey = undefined;
1273
1273
  this._index = -1;
1274
+
1275
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
1276
+ // reactive properties above normally schedules updated() → updateItemsState,
1277
+ // but that only runs when a property actually changes. If an option still
1278
+ // carries a stale `selected`/`aria-selected` attribute while these
1279
+ // properties are already undefined (e.g. options were rebuilt after a value
1280
+ // was set), no re-render fires and the option keeps rendering as selected.
1281
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
1282
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
1283
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
1284
+ this.updateItemsState(new Map([
1285
+ [
1286
+ 'optionSelected',
1287
+ true
1288
+ ]
1289
+ ]));
1274
1290
  }
1275
1291
 
1276
1292
  /**
@@ -1235,7 +1235,7 @@ class AuroHelpText extends i$2 {
1235
1235
  }
1236
1236
  }
1237
1237
 
1238
- var formkitVersion = '202609011635';
1238
+ var formkitVersion = '202609021726';
1239
1239
 
1240
1240
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1241
1241
  // See LICENSE in the project root for license information.
@@ -1235,7 +1235,7 @@ class AuroHelpText extends i$2 {
1235
1235
  }
1236
1236
  }
1237
1237
 
1238
- var formkitVersion = '202609011635';
1238
+ var formkitVersion = '202609021726';
1239
1239
 
1240
1240
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1241
1241
  // See LICENSE in the project root for license information.
@@ -1235,7 +1235,7 @@ class AuroHelpText extends i$2 {
1235
1235
  }
1236
1236
  }
1237
1237
 
1238
- var formkitVersion = '202609011635';
1238
+ var formkitVersion = '202609021726';
1239
1239
 
1240
1240
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1241
1241
  // See LICENSE in the project root for license information.
@@ -1174,7 +1174,7 @@ class AuroHelpText extends LitElement {
1174
1174
  }
1175
1175
  }
1176
1176
 
1177
- var formkitVersion = '202609011635';
1177
+ var formkitVersion = '202609021726';
1178
1178
 
1179
1179
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1180
1180
  // See LICENSE in the project root for license information.
@@ -1174,7 +1174,7 @@ class AuroHelpText extends LitElement {
1174
1174
  }
1175
1175
  }
1176
1176
 
1177
- var formkitVersion = '202609011635';
1177
+ var formkitVersion = '202609021726';
1178
1178
 
1179
1179
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1180
1180
  // See LICENSE in the project root for license information.
@@ -4925,7 +4925,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4925
4925
  }
4926
4926
  };
4927
4927
 
4928
- var formkitVersion$1 = '202609011635';
4928
+ var formkitVersion$1 = '202609021726';
4929
4929
 
4930
4930
  /**
4931
4931
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7098,7 +7098,7 @@ class AuroHelpText extends i$2 {
7098
7098
  }
7099
7099
  }
7100
7100
 
7101
- var formkitVersion = '202609011635';
7101
+ var formkitVersion = '202609021726';
7102
7102
 
7103
7103
  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{max-width:100%}.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%;box-sizing:border-box;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{overflow:hidden;height:auto;text-overflow:ellipsis;white-space:nowrap}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}`;
7104
7104
 
@@ -9991,6 +9991,22 @@ class AuroMenu extends AuroElement$1 {
9991
9991
  this.value = undefined;
9992
9992
  this._selectedKey = undefined;
9993
9993
  this._index = -1;
9994
+
9995
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
9996
+ // reactive properties above normally schedules updated() → updateItemsState,
9997
+ // but that only runs when a property actually changes. If an option still
9998
+ // carries a stale `selected`/`aria-selected` attribute while these
9999
+ // properties are already undefined (e.g. options were rebuilt after a value
10000
+ // was set), no re-render fires and the option keeps rendering as selected.
10001
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
10002
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
10003
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
10004
+ this.updateItemsState(new Map([
10005
+ [
10006
+ 'optionSelected',
10007
+ true
10008
+ ]
10009
+ ]));
9994
10010
  }
9995
10011
 
9996
10012
  /**
@@ -397,6 +397,55 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
397
397
  <p>The following public methods are available on the <code>&lt;auro-select&gt;</code> element.</p>
398
398
  <auro-header level="3" id="reset">reset()</auro-header>
399
399
  <p>Resets the component to its initial state, clearing the value and validation state.</p>
400
+ <div class="exampleWrapper">
401
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
402
+ <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
403
+ <auro-button id="resetStateBtn">Reset</auro-button>
404
+ <br /><br />
405
+ <auro-select id="resetStateExample" value="price">
406
+ <span slot="ariaLabel.bib.close">Close Popup</span>
407
+ <span slot="bib.fullscreen.headline">Sort by</span>
408
+ <span slot="label">Sort by</span>
409
+ <auro-menu>
410
+ <auro-menuoption value="stops">Stops</auro-menuoption>
411
+ <auro-menuoption value="price">Price</auro-menuoption>
412
+ <auro-menuoption value="duration">Duration</auro-menuoption>
413
+ <auro-menuoption value="departure">Departure</auro-menuoption>
414
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
415
+ </auro-menu>
416
+ </auro-select>
417
+ <!-- AURO-GENERATED-CONTENT:END -->
418
+ </div>
419
+ <auro-accordion alignRight>
420
+ <span slot="trigger">See code</span>
421
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
422
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
423
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
424
+ &lt;br /&gt;&lt;br /&gt;
425
+ &lt;auro-select id="resetStateExample" value="price"&gt;
426
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
427
+ &lt;span slot="bib.fullscreen.headline"&gt;Sort by&lt;/span&gt;
428
+ &lt;span slot="label"&gt;Sort by&lt;/span&gt;
429
+ &lt;auro-menu&gt;
430
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
431
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
432
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
433
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
434
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
435
+ &lt;/auro-menu&gt;
436
+ &lt;/auro-select&gt;</code></pre>
437
+ <!-- AURO-GENERATED-CONTENT:END -->
438
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
439
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
440
+ <pre class="language-js"><code class="language-js">export function resetStateExample() {
441
+ const elem = document.querySelector('#resetStateExample');
442
+ ​
443
+ document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
444
+ elem.reset();
445
+ });
446
+ }</code></pre>
447
+ <!-- AURO-GENERATED-CONTENT:END -->
448
+ </auro-accordion>
400
449
  <auro-header level="3" id="updateActiveOption">updateActiveOption()</auro-header>
401
450
  <p>Updates the active option in the menu by index. The active option receives visual focus when navigating with the keyboard.</p>
402
451
  <auro-header level="3" id="hideBib">hideBib()</auro-header>
@@ -4925,7 +4925,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4925
4925
  }
4926
4926
  };
4927
4927
 
4928
- var formkitVersion$1 = '202609011635';
4928
+ var formkitVersion$1 = '202609021726';
4929
4929
 
4930
4930
  /**
4931
4931
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7098,7 +7098,7 @@ class AuroHelpText extends i$2 {
7098
7098
  }
7099
7099
  }
7100
7100
 
7101
- var formkitVersion = '202609011635';
7101
+ var formkitVersion = '202609021726';
7102
7102
 
7103
7103
  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{max-width:100%}.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%;box-sizing:border-box;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{overflow:hidden;height:auto;text-overflow:ellipsis;white-space:nowrap}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}`;
7104
7104
 
@@ -9991,6 +9991,22 @@ class AuroMenu extends AuroElement$1 {
9991
9991
  this.value = undefined;
9992
9992
  this._selectedKey = undefined;
9993
9993
  this._index = -1;
9994
+
9995
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
9996
+ // reactive properties above normally schedules updated() → updateItemsState,
9997
+ // but that only runs when a property actually changes. If an option still
9998
+ // carries a stale `selected`/`aria-selected` attribute while these
9999
+ // properties are already undefined (e.g. options were rebuilt after a value
10000
+ // was set), no re-render fires and the option keeps rendering as selected.
10001
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
10002
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
10003
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
10004
+ this.updateItemsState(new Map([
10005
+ [
10006
+ 'optionSelected',
10007
+ true
10008
+ ]
10009
+ ]));
9994
10010
  }
9995
10011
 
9996
10012
  /**
@@ -10786,12 +10802,33 @@ class AuroMenuOption extends AuroElement$1 {
10786
10802
  AuroMenu.register();
10787
10803
  AuroMenuOption.register();
10788
10804
 
10805
+ function resetStateExample() {
10806
+ const elem = document.querySelector('#resetStateExample');
10807
+
10808
+ document.querySelector('#resetStateBtn').addEventListener('click', () => {
10809
+ elem.reset();
10810
+ });
10811
+ }
10812
+
10789
10813
  /* eslint-disable jsdoc/require-jsdoc */
10790
10814
 
10791
10815
 
10792
10816
  AuroSelect.register();
10793
10817
  AuroSelect.register('custom-select');
10794
10818
 
10795
- function initExamples() {}
10819
+ function initExamples(initCount) {
10820
+ initCount = initCount || 0;
10821
+
10822
+ try {
10823
+ resetStateExample();
10824
+ } catch (err) {
10825
+ if (initCount <= 20) {
10826
+ // setTimeout handles the case where example content is rendered after this function runs.
10827
+ setTimeout(() => {
10828
+ initExamples(initCount + 1);
10829
+ }, 100);
10830
+ }
10831
+ }
10832
+ }
10796
10833
 
10797
10834
  export { initExamples };