@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.5 → 0.0.0-pr1475.7

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 (81) 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/demo/pages.json +1 -1
  5. package/components/checkbox/demo/why-checkbox.html +57 -0
  6. package/components/checkbox/demo/why-checkbox.md +86 -0
  7. package/components/checkbox/dist/index.js +1 -1
  8. package/components/checkbox/dist/registered.js +1 -1
  9. package/components/combobox/demo/customize.min.js +10 -8
  10. package/components/combobox/demo/getting-started.min.js +10 -8
  11. package/components/combobox/demo/index.min.js +10 -8
  12. package/components/combobox/demo/pages.json +1 -1
  13. package/components/combobox/demo/why-combobox.html +57 -0
  14. package/components/combobox/demo/why-combobox.md +113 -0
  15. package/components/combobox/dist/index.js +10 -8
  16. package/components/combobox/dist/registered.js +10 -8
  17. package/components/counter/demo/customize.min.js +9 -7
  18. package/components/counter/demo/index.min.js +9 -7
  19. package/components/counter/demo/pages.json +1 -1
  20. package/components/counter/demo/why-counter.html +57 -0
  21. package/components/counter/demo/why-counter.md +108 -0
  22. package/components/counter/dist/index.js +1 -1
  23. package/components/counter/dist/registered.js +1 -1
  24. package/components/datepicker/demo/api.md +2 -2
  25. package/components/datepicker/demo/customize.min.js +260 -36
  26. package/components/datepicker/demo/index.md +2 -1
  27. package/components/datepicker/demo/index.min.js +260 -36
  28. package/components/datepicker/demo/pages.json +1 -1
  29. package/components/datepicker/demo/voiceover.md +3 -3
  30. package/components/datepicker/demo/why-datepicker.html +57 -0
  31. package/components/datepicker/demo/why-datepicker.md +133 -0
  32. package/components/datepicker/dist/index.js +260 -36
  33. package/components/datepicker/dist/registered.js +260 -36
  34. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +2 -0
  35. package/components/datepicker/dist/src/auro-calendar.d.ts +17 -1
  36. package/components/datepicker/dist/src/auro-datepicker.d.ts +8 -0
  37. package/components/dropdown/demo/customize.min.js +8 -6
  38. package/components/dropdown/demo/getting-started.min.js +8 -6
  39. package/components/dropdown/demo/index.min.js +8 -6
  40. package/components/dropdown/demo/pages.json +1 -1
  41. package/components/dropdown/demo/why-dropdown.html +57 -0
  42. package/components/dropdown/demo/why-dropdown.md +97 -0
  43. package/components/dropdown/dist/auro-dropdown.d.ts +3 -1
  44. package/components/dropdown/dist/index.js +8 -6
  45. package/components/dropdown/dist/registered.js +8 -6
  46. package/components/form/demo/customize.min.js +291 -61
  47. package/components/form/demo/getting-started.min.js +291 -61
  48. package/components/form/demo/index.min.js +291 -61
  49. package/components/form/demo/pages.json +1 -1
  50. package/components/form/demo/registerDemoDeps.min.js +291 -61
  51. package/components/form/demo/why-form.html +57 -0
  52. package/components/form/demo/why-form.md +101 -0
  53. package/components/input/demo/customize.min.js +1 -1
  54. package/components/input/demo/getting-started.min.js +1 -1
  55. package/components/input/demo/index.min.js +1 -1
  56. package/components/input/demo/pages.json +1 -1
  57. package/components/input/demo/why-input.html +57 -0
  58. package/components/input/demo/why-input.md +121 -0
  59. package/components/input/dist/index.js +1 -1
  60. package/components/input/dist/registered.js +1 -1
  61. package/components/menu/demo/pages.json +1 -1
  62. package/components/menu/demo/why-menu.html +57 -0
  63. package/components/menu/demo/why-menu.md +104 -0
  64. package/components/radio/demo/customize.min.js +1 -1
  65. package/components/radio/demo/getting-started.min.js +1 -1
  66. package/components/radio/demo/index.min.js +1 -1
  67. package/components/radio/demo/pages.json +1 -1
  68. package/components/radio/demo/why-radio.html +57 -0
  69. package/components/radio/demo/why-radio.md +92 -0
  70. package/components/radio/dist/index.js +1 -1
  71. package/components/radio/dist/registered.js +1 -1
  72. package/components/select/demo/customize.min.js +9 -7
  73. package/components/select/demo/getting-started.min.js +9 -7
  74. package/components/select/demo/index.min.js +9 -7
  75. package/components/select/demo/pages.json +1 -1
  76. package/components/select/demo/why-select.html +57 -0
  77. package/components/select/demo/why-select.md +128 -0
  78. package/components/select/dist/index.js +9 -7
  79. package/components/select/dist/registered.js +9 -7
  80. package/custom-elements.json +1486 -1441
  81. package/package.json +2 -2
package/components/radio/demo/why-radio.html ADDED
@@ -0,0 +1,57 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/why-radio.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-radio | Why auro-radio</title>
20
+
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ <style>
36
+ table {
37
+ --ds-color-container-secondary-default: transparent;
38
+ }
39
+
40
+ tr:not(:last-of-type) {
41
+ border-bottom: 1px solid var(--ds-color-border-tertiary-default);
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="auro-markdown">
46
+ <main></main>
47
+
48
+ <script type="module">
49
+ import { renderPage } from './demo-support.min.js';
50
+ await renderPage('./why-radio.md');
51
+ </script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
56
+ </body>
57
+ </html>
package/components/radio/demo/why-radio.md ADDED
@@ -0,0 +1,92 @@
1
+ <auro-header level="1" id="overview">Why auro-radio?</auro-header>
2
+ <p>The native <code>&lt;input type="radio"&gt;</code> provides basic mutual exclusion within a named group, but it cannot be styled consistently, has no built-in group validation or error messaging, and requires manual <code>&lt;fieldset&gt;</code>/<code>&lt;legend&gt;</code> wiring. <code>auro-radio</code> and <code>auro-radio-group</code> address these gaps.</p>
3
+ <auro-header level="2" id="accessibility">Accessibility</auro-header>
4
+ <p>Native radio buttons have basic accessibility, but managing a group with a legend, validation errors, and consistent keyboard behavior requires careful manual implementation.</p>
5
+ <p><code>auro-radio</code> provides:</p>
6
+ <ul>
7
+ <li><strong>Proper ARIA semantics</strong> — Each radio carries <code>role="radio"</code>, <code>aria-checked</code>, <code>aria-required</code>, and <code>aria-disabled</code>.</li>
8
+ <li><strong>Roving tabindex</strong> — Only the selected radio (or the first radio if none is selected) has <code>tabindex="0"</code>. Arrow keys move between radios within the group, matching the expected WAI-ARIA radio group pattern.</li>
9
+ <li><strong>Group labeling</strong> — <code>auro-radio-group</code> provides a <code>legend</code> slot that is automatically associated as the group's accessible label.</li>
10
+ <li><strong>Keyboard interaction</strong> — Arrow keys navigate between options, Space selects the focused radio.</li>
11
+ </ul>
12
+ <auro-header level="2" id="groupManagement">Group management</auro-header>
13
+ <p>Building a radio group with coordinated validation, error display, and state management from native inputs requires custom JavaScript and DOM structure.</p>
14
+ <p><code>auro-radio-group</code> provides:</p>
15
+ <ul>
16
+ <li>A single <code>value</code> property reflecting the selected radio's value</li>
17
+ <li><code>optionSelected</code> reference to the selected element</li>
18
+ <li>Propagation of <code>disabled</code> state to all child radios</li>
19
+ <li>Horizontal layout option via the <code>horizontal</code> attribute</li>
20
+ <li><code>reset()</code> to clear selection and validation state across all children</li>
21
+ </ul>
22
+ <auro-header level="2" id="validation">Validation</auro-header>
23
+ <p>Native radio groups support <code>required</code> via the HTML attribute, but the error message is browser-controlled and there is no standard way to display custom error text below the group.</p>
24
+ <p><code>auro-radio-group</code> integrates with the Auro form validation system:</p>
25
+ <ul>
26
+ <li>Group-level <code>required</code> validation (at least one must be selected)</li>
27
+ <li>Custom error messages via <code>setCustomValidityCustomError</code> and <code>setCustomValidityValueMissing</code></li>
28
+ <li><code>noValidate</code> to disable auto-validation on blur</li>
29
+ <li><code>touched</code> tracking so errors appear only after user interaction</li>
30
+ <li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
31
+ <li>Error display via the <code>helpText</code> slot</li>
32
+ </ul>
33
+ <auro-header level="2" id="themingAndVisualConsistency">Theming and visual consistency</auro-header>
34
+ <p>Native radio buttons render differently across browsers and operating systems. Their appearance — the circle, the fill, the label spacing — cannot be reliably controlled with CSS alone.</p>
35
+ <p><code>auro-radio</code> is built with the Auro Design System:</p>
36
+ <ul>
37
+ <li>Consistent visual language across all browsers and platforms</li>
38
+ <li>Light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>)</li>
39
+ <li>CSS <code>::part()</code> selectors for targeted styling (<code>radio</code>, <code>radio-input</code>, <code>radio-label</code>)</li>
40
+ </ul>
41
+ <auro-header level="2" id="summary">Summary</auro-header>
42
+ <table>
43
+ <thead>
44
+ <tr>
45
+ <th>Capability</th>
46
+ <th><code>&lt;input type="radio"&gt;</code></th>
47
+ <th><code>auro-radio</code></th>
48
+ </tr>
49
+ </thead>
50
+ <tbody>
51
+ <tr>
52
+ <td>Consistent cross-browser styling</td>
53
+ <td>No</td>
54
+ <td>Yes</td>
55
+ </tr>
56
+ <tr>
57
+ <td>Group validation</td>
58
+ <td>Manual <code>&lt;fieldset&gt;</code></td>
59
+ <td>Built-in with <code>auro-radio-group</code></td>
60
+ </tr>
61
+ <tr>
62
+ <td>Custom error messages</td>
63
+ <td>Browser-controlled</td>
64
+ <td>Per-constraint custom messages</td>
65
+ </tr>
66
+ <tr>
67
+ <td>Roving tabindex</td>
68
+ <td>Manual implementation</td>
69
+ <td>Built-in</td>
70
+ </tr>
71
+ <tr>
72
+ <td>Group legend</td>
73
+ <td>Manual <code>&lt;legend&gt;</code></td>
74
+ <td><code>legend</code> slot</td>
75
+ </tr>
76
+ <tr>
77
+ <td>Horizontal layout</td>
78
+ <td>Manual CSS</td>
79
+ <td><code>horizontal</code> attribute</td>
80
+ </tr>
81
+ <tr>
82
+ <td>Theming</td>
83
+ <td>Browser-dependent</td>
84
+ <td>Full design system integration</td>
85
+ </tr>
86
+ <tr>
87
+ <td>Reset group</td>
88
+ <td>Manual per-element</td>
89
+ <td>Single <code>reset()</code> call</td>
90
+ </tr>
91
+ </tbody>
92
+ </table>
package/components/radio/dist/index.js CHANGED
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202605190111';
1576
+ var formkitVersion = '202605202151';
1577
1577
 
1578
1578
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1579
1579
  // See LICENSE in the project root for license information.
package/components/radio/dist/registered.js CHANGED
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202605190111';
1576
+ var formkitVersion = '202605202151';
1577
1577
 
1578
1578
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1579
1579
  // See LICENSE in the project root for license information.
package/components/select/demo/customize.min.js CHANGED
@@ -5333,7 +5333,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
5333
5333
  }
5334
5334
  };
5335
5335
 
5336
- var formkitVersion$1 = '202605190111';
5336
+ var formkitVersion$1 = '202605202151';
5337
5337
 
5338
5338
  class AuroElement extends i$3 {
5339
5339
  static get properties() {
@@ -6330,9 +6330,9 @@ class AuroDropdown extends AuroElement {
6330
6330
  while (current.parentElement) {
6331
6331
  const parent = current.parentElement;
6332
6332
  for (const sibling of parent.children) {
6333
- if (sibling !== current && !sibling.inert) {
6333
+ if (sibling !== current) {
6334
+ this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
6334
6335
  sibling.inert = true;
6335
- this._inertSiblings.push(sibling);
6336
6336
  }
6337
6337
  }
6338
6338
  current = parent;
@@ -6340,13 +6340,15 @@ class AuroDropdown extends AuroElement {
6340
6340
  }
6341
6341
 
6342
6342
  /**
6343
- * Restores `inert` state on siblings that were made inert by `_setPageInert`.
6343
+ * Restores `inert` state on siblings that were tracked by `_setPageInert`.
6344
+ * Preserves the previous inert state so externally-inerted elements are
6345
+ * not inadvertently re-enabled.
6344
6346
  * @private
6345
6347
  */
6346
6348
  _clearPageInert() {
6347
6349
  if (this._inertSiblings) {
6348
- for (const sibling of this._inertSiblings) {
6349
- sibling.inert = false;
6350
+ for (const entry of this._inertSiblings) {
6351
+ entry.element.inert = entry.wasInert;
6350
6352
  }
6351
6353
  this._inertSiblings = undefined;
6352
6354
  }
@@ -7302,7 +7304,7 @@ class AuroHelpText extends i$3 {
7302
7304
  }
7303
7305
  }
7304
7306
 
7305
- var formkitVersion = '202605190111';
7307
+ var formkitVersion = '202605202151';
7306
7308
 
7307
7309
  var styleCss$2 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7308
7310
 
package/components/select/demo/getting-started.min.js CHANGED
@@ -5364,7 +5364,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
5364
5364
  }
5365
5365
  };
5366
5366
 
5367
- var formkitVersion$1 = '202605190111';
5367
+ var formkitVersion$1 = '202605202151';
5368
5368
 
5369
5369
  class AuroElement extends i$3 {
5370
5370
  static get properties() {
@@ -6361,9 +6361,9 @@ class AuroDropdown extends AuroElement {
6361
6361
  while (current.parentElement) {
6362
6362
  const parent = current.parentElement;
6363
6363
  for (const sibling of parent.children) {
6364
- if (sibling !== current && !sibling.inert) {
6364
+ if (sibling !== current) {
6365
+ this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
6365
6366
  sibling.inert = true;
6366
- this._inertSiblings.push(sibling);
6367
6367
  }
6368
6368
  }
6369
6369
  current = parent;
@@ -6371,13 +6371,15 @@ class AuroDropdown extends AuroElement {
6371
6371
  }
6372
6372
 
6373
6373
  /**
6374
- * Restores `inert` state on siblings that were made inert by `_setPageInert`.
6374
+ * Restores `inert` state on siblings that were tracked by `_setPageInert`.
6375
+ * Preserves the previous inert state so externally-inerted elements are
6376
+ * not inadvertently re-enabled.
6375
6377
  * @private
6376
6378
  */
6377
6379
  _clearPageInert() {
6378
6380
  if (this._inertSiblings) {
6379
- for (const sibling of this._inertSiblings) {
6380
- sibling.inert = false;
6381
+ for (const entry of this._inertSiblings) {
6382
+ entry.element.inert = entry.wasInert;
6381
6383
  }
6382
6384
  this._inertSiblings = undefined;
6383
6385
  }
@@ -7333,7 +7335,7 @@ class AuroHelpText extends i$3 {
7333
7335
  }
7334
7336
  }
7335
7337
 
7336
- var formkitVersion = '202605190111';
7338
+ var formkitVersion = '202605202151';
7337
7339
 
7338
7340
  var styleCss$2 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7339
7341
 
package/components/select/demo/index.min.js CHANGED
@@ -5333,7 +5333,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
5333
5333
  }
5334
5334
  };
5335
5335
 
5336
- var formkitVersion$1 = '202605190111';
5336
+ var formkitVersion$1 = '202605202151';
5337
5337
 
5338
5338
  class AuroElement extends i$3 {
5339
5339
  static get properties() {
@@ -6330,9 +6330,9 @@ class AuroDropdown extends AuroElement {
6330
6330
  while (current.parentElement) {
6331
6331
  const parent = current.parentElement;
6332
6332
  for (const sibling of parent.children) {
6333
- if (sibling !== current && !sibling.inert) {
6333
+ if (sibling !== current) {
6334
+ this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
6334
6335
  sibling.inert = true;
6335
- this._inertSiblings.push(sibling);
6336
6336
  }
6337
6337
  }
6338
6338
  current = parent;
@@ -6340,13 +6340,15 @@ class AuroDropdown extends AuroElement {
6340
6340
  }
6341
6341
 
6342
6342
  /**
6343
- * Restores `inert` state on siblings that were made inert by `_setPageInert`.
6343
+ * Restores `inert` state on siblings that were tracked by `_setPageInert`.
6344
+ * Preserves the previous inert state so externally-inerted elements are
6345
+ * not inadvertently re-enabled.
6344
6346
  * @private
6345
6347
  */
6346
6348
  _clearPageInert() {
6347
6349
  if (this._inertSiblings) {
6348
- for (const sibling of this._inertSiblings) {
6349
- sibling.inert = false;
6350
+ for (const entry of this._inertSiblings) {
6351
+ entry.element.inert = entry.wasInert;
6350
6352
  }
6351
6353
  this._inertSiblings = undefined;
6352
6354
  }
@@ -7302,7 +7304,7 @@ class AuroHelpText extends i$3 {
7302
7304
  }
7303
7305
  }
7304
7306
 
7305
- var formkitVersion = '202605190111';
7307
+ var formkitVersion = '202605202151';
7306
7308
 
7307
7309
  var styleCss$2 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7308
7310
 
package/components/select/demo/pages.json CHANGED
@@ -1 +1 @@
1
- ["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]
1
+ ["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-select.md","readme.md"]
package/components/select/demo/why-select.html ADDED
@@ -0,0 +1,57 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/why-select.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-select | Why auro-select</title>
20
+
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ <style>
36
+ table {
37
+ --ds-color-container-secondary-default: transparent;
38
+ }
39
+
40
+ tr:not(:last-of-type) {
41
+ border-bottom: 1px solid var(--ds-color-border-tertiary-default);
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="auro-markdown">
46
+ <main></main>
47
+
48
+ <script type="module">
49
+ import { renderPage } from './demo-support.min.js';
50
+ await renderPage('./why-select.md');
51
+ </script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
56
+ </body>
57
+ </html>
package/components/select/demo/why-select.md ADDED
@@ -0,0 +1,128 @@
1
+ <auro-header level="1" id="overview">Why auro-select?</auro-header>
2
+ <p>The native <code>&lt;select&gt;</code> element is one of the most difficult HTML elements to style, has no support for rich option content, and behaves inconsistently across browsers. <code>auro-select</code> provides a fully styled, accessible, and feature-rich replacement.</p>
3
+ <auro-header level="2" id="accessibility">Accessibility</auro-header>
4
+ <p>Native <code>&lt;select&gt;</code> has basic accessibility, but the dropdown behavior, keyboard navigation, and screen reader announcements vary between browsers and platforms.</p>
5
+ <p><code>auro-select</code> provides:</p>
6
+ <ul>
7
+ <li><strong>ARIA combobox pattern</strong> — The trigger uses <code>role="combobox"</code> with <code>aria-expanded</code>, <code>aria-controls</code>, and <code>aria-activedescendant</code> for proper screen reader semantics.</li>
8
+ <li><strong>Full keyboard navigation</strong> — Arrow Up/Down navigate options (with Alt modifier for jumping to first/last), Enter selects, Escape closes, Home/End jump to boundaries, Tab closes and advances focus.</li>
9
+ <li><strong>Screen reader announcements</strong> — <code>aria-live="polite"</code> announces selections, <code>aria-live="assertive"</code> announces validation errors. Each option carries <code>aria-setsize</code> and <code>aria-posinset</code> for position context.</li>
10
+ <li><strong>Active descendant</strong> — Focus stays on the trigger while arrow keys highlight options, so screen readers announce the highlighted option without disrupting focus.</li>
11
+ </ul>
12
+ <auro-header level="2" id="richOptionContent">Rich option content</auro-header>
13
+ <p><code>&lt;option&gt;</code> elements accept only plain text. There is no native way to add icons, secondary text, or nested groups.</p>
14
+ <p><code>auro-select</code> uses <code>auro-menu</code> internally, enabling:</p>
15
+ <ul>
16
+ <li>Full HTML content in each option (icons, descriptions, badges)</li>
17
+ <li>Nested option groups for hierarchical organization</li>
18
+ <li>Checkmark indicators for the selected option</li>
19
+ <li>Option sizing (sm, md) for different information density</li>
20
+ </ul>
21
+ <auro-header level="2" id="multiselect">Multi-select</auro-header>
22
+ <p>Native <code>&lt;select multiple&gt;</code> renders a scrollable list box — a UI pattern widely regarded as confusing. Users must Ctrl+click to select multiple items, and there is no checkmark or visual feedback.</p>
23
+ <p><code>auro-select</code> with <code>multiSelect</code> provides:</p>
24
+ <ul>
25
+ <li>A dropdown trigger that stays closed between selections</li>
26
+ <li>Checkmarks on each selected option</li>
27
+ <li>A JSON-stringified array value for easy consumption</li>
28
+ <li><code>clearSelection()</code> to reset all selections</li>
29
+ </ul>
30
+ <auro-header level="2" id="responsiveLayout">Responsive layout</auro-header>
31
+ <p>Native <code>&lt;select&gt;</code> renders a browser-controlled popup that cannot be repositioned, resized, or presented differently on mobile.</p>
32
+ <p><code>auro-select</code> adapts to the viewport:</p>
33
+ <ul>
34
+ <li><strong>Desktop</strong> — Options appear in a positioned dropdown using Floating UI, with configurable placement, offset, flip, shift, and auto-placement</li>
35
+ <li><strong>Mobile</strong> — Options open in a fullscreen dialog below a configurable breakpoint (<code>fullscreenBreakpoint</code>)</li>
36
+ <li><strong>Width control</strong> — <code>matchWidth</code> sizes the dropdown to the trigger, <code>flexMenuWidth</code> lets it size independently</li>
37
+ </ul>
38
+ <auro-header level="2" id="validation">Validation</auro-header>
39
+ <p>Native <code>&lt;select&gt;</code> validation is limited to <code>required</code>. Error messages are browser-controlled.</p>
40
+ <p><code>auro-select</code> integrates with the Auro form validation system:</p>
41
+ <ul>
42
+ <li>Required field validation with custom messaging</li>
43
+ <li>Custom error messages per validity state (<code>setCustomValidityCustomError</code>, <code>setCustomValidityValueMissing</code>)</li>
44
+ <li><code>noValidate</code> to disable auto-validation on blur</li>
45
+ <li>Error display via the <code>helpText</code> slot</li>
46
+ <li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
47
+ </ul>
48
+ <auro-header level="2" id="displayValueCustomization">Display value customization</auro-header>
49
+ <p>Native <code>&lt;select&gt;</code> always shows the selected option's text. There is no way to display a formatted or alternative representation.</p>
50
+ <p><code>auro-select</code> provides:</p>
51
+ <ul>
52
+ <li>A <code>displayValue</code> slot for custom HTML rendering of the selected value</li>
53
+ <li>A <code>valueText</code> slot for formatted text display</li>
54
+ <li>A <code>placeholder</code> slot (or attribute) for empty-state messaging</li>
55
+ <li><code>forceDisplayValue</code> to always show the custom display slot</li>
56
+ </ul>
57
+ <auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
58
+ <p>Native <code>&lt;select&gt;</code> styling is notoriously difficult. The dropdown arrow, option list, and selected value display are all browser-controlled and resist CSS customization.</p>
59
+ <p><code>auro-select</code> is built with the Auro Design System:</p>
60
+ <ul>
61
+ <li>Three layout options: classic, emphasized, snowflake</li>
62
+ <li>Shape variants: box, pill, pill-left, pill-right</li>
63
+ <li>Size options (lg, xl for emphasized layout)</li>
64
+ <li>Light and dark theme support (<code>appearance</code>)</li>
65
+ <li>CSS <code>::part()</code> selectors (<code>dropdownTrigger</code>, <code>dropdownChevron</code>, <code>dropdownSize</code>, <code>helpText</code>)</li>
66
+ </ul>
67
+ <auro-header level="2" id="summary">Summary</auro-header>
68
+ <table>
69
+ <thead>
70
+ <tr>
71
+ <th>Capability</th>
72
+ <th><code>&lt;select&gt;</code></th>
73
+ <th><code>auro-select</code></th>
74
+ </tr>
75
+ </thead>
76
+ <tbody>
77
+ <tr>
78
+ <td>Styleable dropdown</td>
79
+ <td>No (browser-controlled)</td>
80
+ <td>Fully styled</td>
81
+ </tr>
82
+ <tr>
83
+ <td>Rich HTML in options</td>
84
+ <td>Plain text only</td>
85
+ <td>Full HTML (icons, groups, descriptions)</td>
86
+ </tr>
87
+ <tr>
88
+ <td>Multi-select UX</td>
89
+ <td>Ctrl+click list box</td>
90
+ <td>Checkmark dropdown</td>
91
+ </tr>
92
+ <tr>
93
+ <td>Keyboard navigation</td>
94
+ <td>Basic</td>
95
+ <td>Full (arrows, Alt+arrows, Home/End)</td>
96
+ </tr>
97
+ <tr>
98
+ <td>Screen reader announcements</td>
99
+ <td>Varies by browser</td>
100
+ <td>Consistent ARIA live regions</td>
101
+ </tr>
102
+ <tr>
103
+ <td>Mobile fullscreen</td>
104
+ <td>No</td>
105
+ <td>Automatic at breakpoint</td>
106
+ </tr>
107
+ <tr>
108
+ <td>Viewport-aware positioning</td>
109
+ <td>No</td>
110
+ <td>Floating UI with flip/shift/auto</td>
111
+ </tr>
112
+ <tr>
113
+ <td>Custom validation messages</td>
114
+ <td>Browser-controlled</td>
115
+ <td>Per-constraint custom messages</td>
116
+ </tr>
117
+ <tr>
118
+ <td>Display value customization</td>
119
+ <td>No</td>
120
+ <td><code>displayValue</code> and <code>valueText</code> slots</td>
121
+ </tr>
122
+ <tr>
123
+ <td>Theming</td>
124
+ <td>No</td>
125
+ <td>Three layouts + appearance modes</td>
126
+ </tr>
127
+ </tbody>
128
+ </table>