@aurodesignsystem-dev/auro-formkit 0.0.0-pr1503.3 → 0.0.0-pr1503.5

package/components/bibtemplate/dist/index.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem))}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 

package/components/bibtemplate/dist/registered.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem))}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 

package/components/checkbox/demo/accessibility.md

@@ -4,7 +4,7 @@
 <div class="scrollWrapper">
 The `auro-checkbox` component follows native HTML checkbox semantics. This page documents the ARIA attributes, screen reader behavior, and other accessibility features built into the component.
 
-For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+For keyboard interaction details, see the <auro-hyperlink href="keyboard-behavior">Keyboard Behavior</auro-hyperlink> page.
 
 <auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
 <auro-header level="3" id="checkboxGroup">Checkbox Group</auro-header>

package/components/checkbox/demo/customize.html

@@ -40,12 +40,11 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
-    <script type="module">
+    <script type="module" data-demo-script="true">
       import { renderPage } from './demo-support.min.js';
       await renderPage('./customize.md');
       import { initExamples } from "./customize.min.js";
       initExamples();
     </script>
-    <script src="./customize.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/checkbox/demo/customize.min.js

@@ -759,8 +759,21 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+
+          if (isPartialDateFormat) {
+            if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
+              elem.validity = 'patternMismatch';
+              elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            }
+            // Partial date format — validate directly and skip max/min checks since valueObject is undefined.
+            return;
+          }
+
+          // Full date format with no valueObject means the value is not a valid calendar date.
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -857,15 +870,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -964,7 +979,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1260,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606191810';
+var formkitVersion = '202607221815';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/getting-started.min.js

@@ -759,8 +759,21 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+
+          if (isPartialDateFormat) {
+            if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
+              elem.validity = 'patternMismatch';
+              elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            }
+            // Partial date format — validate directly and skip max/min checks since valueObject is undefined.
+            return;
+          }
+
+          // Full date format with no valueObject means the value is not a valid calendar date.
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -857,15 +870,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -964,7 +979,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1260,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606191810';
+var formkitVersion = '202607221815';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/index.min.js

@@ -759,8 +759,21 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+
+          if (isPartialDateFormat) {
+            if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
+              elem.validity = 'patternMismatch';
+              elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            }
+            // Partial date format — validate directly and skip max/min checks since valueObject is undefined.
+            return;
+          }
+
+          // Full date format with no valueObject means the value is not a valid calendar date.
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -857,15 +870,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -964,7 +979,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1260,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606191810';
+var formkitVersion = '202607221815';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -712,8 +712,21 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+
+          if (isPartialDateFormat) {
+            if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
+              elem.validity = 'patternMismatch';
+              elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            }
+            // Partial date format — validate directly and skip max/min checks since valueObject is undefined.
+            return;
+          }
+
+          // Full date format with no valueObject means the value is not a valid calendar date.
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -810,15 +823,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -917,7 +932,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1213,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606191810';
+var formkitVersion = '202607221815';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -712,8 +712,21 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+
+          if (isPartialDateFormat) {
+            if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
+              elem.validity = 'patternMismatch';
+              elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            }
+            // Partial date format — validate directly and skip max/min checks since valueObject is undefined.
+            return;
+          }
+
+          // Full date format with no valueObject means the value is not a valid calendar date.
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -810,15 +823,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -917,7 +932,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1213,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606191810';
+var formkitVersion = '202607221815';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/README.md

@@ -24,7 +24,7 @@ The following sections are editable by making changes to the following files:
 <p>The component supports two modes:</p>
 <ul>
 <li><strong>Suggestion (default)</strong> — The user may type any value. The menu provides suggestions but does not restrict input.</li>
-<li><strong>Filter</strong> — The user must select from the menu. Typing filters the available options but does not set the component's value. The value is only set when a menu option is selected.</li>
+<li><strong>Filter</strong> — Typing filters the available options and sets the component's <code>value</code> to the typed text, but the input is not considered valid until a menu option is selected. Validation surfaces <code>valueMissing</code> until the typed value matches a chosen option.</li>
 </ul>
 <p>Common use cases:</p>
 <ul>

package/components/combobox/demo/accessibility.md

@@ -4,7 +4,7 @@
 <div class="scrollWrapper">
 The `auro-combobox` component follows the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" target="_blank">W3C APG Combobox</a> pattern. This page documents the ARIA semantics, screen reader announcements, and other accessibility behaviors built into the component.
 
-For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+For keyboard interaction details, see the <auro-hyperlink href="keyboard-behavior">Keyboard Behavior</auro-hyperlink> page.
 
 <auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
 <auro-header level="3" id="trigger">Trigger</auro-header>

package/components/combobox/demo/api.md

@@ -38,11 +38,11 @@ The `auro-combobox` element provides users with a way to select an option from a
 | `setCustomValidityValueMissing`       | `setCustomValidityValueMissing`       |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing`. |
 | `setCustomValidityValueMissingFilter` | `setCustomValidityValueMissingFilter` |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
 | `shift`                               | `shift`                               |           | `boolean`                                        |                  | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| `triggerIcon`                         | `triggerIcon`                         |           | `boolean`                                        |                  | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| `triggerIcon`                         | `triggerIcon`                         |           | `boolean`                                        |                  | If set, the `icon` attribute will be applied to the trigger `auro-input` element.<br />Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`<br />without a supported `type` propagates the attribute but does not render a visible icon. |
 | `type`                                | `type`                                |           | `string`                                         |                  | Applies the defined value as the type attribute on `auro-input`. |
 | `typedValue`                          | `typedValue`                          |           | `string`                                         |                  | Specifies the value of the input element within the combobox. |
 | `validity`                            | `validity`                            |           | `string`                                         |                  | Specifies the `validityState` this element is in. |
-| `value`                               | `value`                               |           | `string`                                         |                  | Value selected for the dropdown menu.            |
+| `value`                               | `value`                               |           | `string`                                         |                  | Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value. |
 
 ## Methods
 

package/components/combobox/demo/customize.html

@@ -41,12 +41,11 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
-    <script type="module">
+    <script type="module" data-demo-script="true">
       import { renderPage } from './demo-support.min.js';
       await renderPage('./customize.md');
       import { initExamples } from "./customize.min.js";
       initExamples();
     </script>
-    <script src="./customize.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>