npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr1448.0 → 0.0.0-pr1451.1 - Mend

@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

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 (163) hide show

package/components/combobox/demo/styles.css ADDED Viewed

@@ -0,0 +1,141 @@
+pre[class*="language-"] {
+  overflow: unset !important;
+}
+table {
+  --ds-color-container-secondary-default: transparent;
+}
+tr:not(:last-of-type) {
+  border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+}
+sup {
+  font-size: 60%;
+  font-style: italic;
+  top: -0.5rem;
+}
+sup a {
+  text-decoration: none !important;
+}
+body {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+.contentWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 25px;
+}
+.mainContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex-basis: 0;
+  box-sizing: border-box;
+  min-width: 0;
+}
+.scrollWrapper {
+  flex: 1;
+  flex-basis: 0;
+  min-height: 0;
+}
+nav {
+  max-width: 200px;
+}
+pre[class*="language-"] {
+  background-color: #ddd !important;
+  padding: var(--ds-size-200) !important;
+  border-radius: .5rem;
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-color: var(--ds-color-border-secondary-default) !important;
+  margin-top: var(--ds-size-200) !important;
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  overflow-x: scroll !important;
+}
+code[class*="language-"] {
+  text-shadow: none;
+}
+:not(pre) > code[class*=language-] {
+  background-color: unset !important;
+}
+.token.operator {
+  background-color: unset !important;
+}
+auro-header {
+  margin: 10px 0;
+}
+auro-anchorlink.level2 {
+  padding-left: var(--ds-size-200);
+}
+table.compressed {
+  width: unset !important;
+  margin: var(--ds-size-50) 0 var(--ds-size-100) !important;
+}
+.note {
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 6px;
+  font-style: italic;
+  color: var(--ds-basic-color-texticon-muted);
+  background-color: var(--ds-basic-color-surface-neutral-subtle);
+}
+table.compressed th,
+table.compressed td {
+  padding: var(--ds-size-50) !important;
+}
+.pre-wrapper {
+  position: relative;
+}
+.copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  background: var(--ds-color-container-primary-default, #fff);
+  border: 1px solid var(--ds-color-border-secondary-default, #ccc);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--ds-color-text-secondary-default, #333);
+  z-index: 1;
+}
+.copy-btn:hover {
+  background: var(--ds-color-container-secondary-default, #f0f0f0);
+}
+.pre-wrapper:hover .copy-btn {
+  opacity: 1;
+}

package/components/combobox/demo/voiceover.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/voiceover.md
+  With the exception of adding custom elements if needed for the demo.
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-combobox | VoiceOver</title>
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./voiceover.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <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>
+  </body>
+</html>

package/components/combobox/demo/voiceover.md ADDED Viewed

@@ -0,0 +1,118 @@
+<auro-header level="1" id="overview">Combobox - VoiceOver Behavior</auro-header>
+<p>This page documents the VoiceOver experience when using the <code>&lt;auro-combobox&gt;</code> component. It covers announcements, gestures, and workflows for both large and small viewports.</p>
+<auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive Announcements</auro-header>
+<auro-header level="3" id="voiceOverFocusAnnouncement">Focus</auro-header>
+<p>When focus is given to the component trigger the following is announced:</p>
+<ol>
+<li><strong>Label:</strong> <code>label</code> slot content</li>
+<li><strong>Current value:</strong> [current value or <em>"no selection"</em>]</li>
+<li><strong>Role:</strong> <em>"combo box"</em></li>
+<li>
+<strong>State hints:</strong>
+<table class="compressed body-xs">
+<thead>
+<tr>
+<th>State</th>
+<th>What gets announced</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Expanded</td>
+<td><em>"collapsed"</em> or <em>"expanded"</em></td>
+</tr>
+<tr>
+<td>Required</td>
+<td><em>"required"</em></td>
+</tr>
+<tr>
+<td>Invalid</td>
+<td><em>"invalid data"</em></td>
+</tr>
+<tr>
+<td>Disabled</td>
+<td><em>"dimmed"</em></td>
+</tr>
+<tr>
+<td>autocomplete</td>
+<td><em>"has auto complete"</em></td>
+</tr>
+</tbody>
+</table>
+</li>
+<li><strong>Additional description:</strong> <code>helptext</code> slot content if present (after a brief pause)</li>
+</ol>
+<auro-header level="3" id="voiceOverNavigateAnnouncement">Navigating Options</auro-header>
+<p>Announces each option <em>"[option label], [<em>"selected"</em> if <code>selected</code>], [<em>"dimmed"</em> if <code>disabled</code>]"</em> as you move.</p>
+<p>3 finger swipe gesture may be used to scroll the option list.</p>
+<auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
+<p>The component may be <strong>closed</strong> | <strong>collapsed</strong> using a gesture.</p>
+<ul>
+<li><strong>iOS VoiceOver:</strong> The two-finger <em>"scrub"</em> (zigzag / a <em>"Z"</em> shape) gesture acts as the <em>'Escape'</em> key, commonly used to dismiss modal views.</li>
+<li>
+<strong>Android TalkBack:</strong> users typically swipe down then left (an <em>"L"</em> gesture) or use the back gesture to go back/close.<br />
+<div class="note">
+<strong>How to Perform Android back/close gesture:</strong> Swipe inwards from either the left or right edge of the screen, typically from the middle-edge, to go to the previous screen.
+</div>
+</li>
+</ul>
+<auro-header level="3" id="voiceOverCollapseAnnouncement">Closed | Collapsed Announcements</auro-header>
+<p>When the component is <strong>closed</strong> | <strong>collapsed</strong> announces the <strong>expanded</strong> state change.</p>
+<auro-header level="2" id="voiceOverLargeVPAnnouncements">Large Viewport Workflow</auro-header>
+<p>Examples: large tablet, typical size or larger desktop browser window</p>
+<ol>
+<li><strong>Focus</strong></li>
+<li>
+<strong>Open | Expand:</strong> When the component is <strong>opened</strong> | <strong>expanded</strong> announces the active option <em>"[option label], ['selected' if <code>selected</code>]"</em>.
+<div class="note">
+<strong>Note:</strong> <code>disabled</code> options can not be <strong>active</strong>, this state would never be included in this announcement.
+</div>
+</li>
+<li><strong>Navigate options</strong></li>
+<li>
+<strong>Select an option:</strong> Collapses the list, announces the <strong>expanded</strong> state change.
+<p>~OR~</p>
+<strong>Close | Collapse without selecting an option:</strong> Collapses the list, announces the <strong>expanded</strong> state change.
+</li>
+</ol>
+<auro-header level="2" id="voiceOverSmallVPAnnouncements">Small Viewport Workflow</auro-header>
+<p>Examples: mobile phone, very small desktop browser window</p>
+<ol>
+<li><strong>Focus</strong></li>
+<li>
+<strong>Open | Expand:</strong> Focus is moved to the fullscreen modal dialog <strong>Close</strong> button, announces the active option <em>"[option label], [<em>'selected'</em> if <code>selected</code>]"</em>.
+<div class="note">
+<strong>Note:</strong> <code>disabled</code> options can not be <strong>active</strong>, this state would never be included in this announcement.
+</div>
+</li>
+<li><strong>Navigate options</strong></li>
+<li>
+<strong>Select option:</strong> Closes the fullscreen modal dialog, announces the <strong>expanded</strong> state change.
+<p>~OR~</p>
+<strong>Close | Collapse without selecting an option:</strong> Closes the fullscreen modal dialog, announces the <strong>expanded</strong> state change.
+</li>
+</ol>
+<p>Key characteristics across both platforms:</p>
+<ul>
+<li>The <code>label</code> is always read first.</li>
+<li>The component <strong>role</strong> is announced as <em>"combo box"</em>.</li>
+<li><code>disabled</code> options are announced as <em>"dimmed"</em> and cannot be selected.</li>
+</ul>
+<auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
+<auro-header level="3" id="voiceOverStateDisabled">Disabled</auro-header>
+<p><strong>What VoiceOver does:</strong></p>
+<ul>
+<li>Focuses the element and announces it (e.g., <em>"[label], dimmed, combo box"</em> on macOS / <em>"[label], dimmed"</em> on iOS).</li>
+<li>The word <strong>"dimmed"</strong> is VoiceOver's way of indicating disabled.</li>
+<li>The element remains in the focus order (Tab still reaches it).</li>
+<li>The user cannot interact with it — the option list can not be expanded, and no selection can be made.</li>
+</ul>
+<p>Key distinction from <code>aria-hidden</code>: A disabled element is <em>reachable but not operable</em>. If you want VoiceOver to skip it entirely, you would need <code>aria-hidden="true"</code> or <code>tabindex="-1"</code>, but that is generally not recommended for disabled controls — users benefit from knowing the field exists and why it may be unavailable.</p>
+<p>This is consistent across NVDA and JAWS as well, though the announcement wording differs (e.g., NVDA says <em>"unavailable"</em>).</p>
+<auro-header level="3" id="voiceOverStateInvalid">Invalid</auro-header>
+<p>When an <code>&lt;auro-combobox&gt;</code> is invalid the following occurs:</p>
+<ul>
+<li><code>Focus</code> — VoiceOver announces <em>"invalid data"</em> (macOS) or <em>"invalid entry"</em> (iOS) after the element's label.</li>
+<li>The Help Text will render the error message and it will be included in the VoiceOver focus announcement.</li>
+</ul>
+<p>Example: when focusing on an invalid <code>&lt;auro-combobox&gt;</code> the VoiceOver announces something like <em>"Destination, invalid data, combo box, Please select a destination"</em>.</p>

package/components/combobox/dist/auro-combobox.d.ts CHANGED Viewed

@@ -329,47 +329,48 @@ export class AuroCombobox extends AuroElement {
      * @returns {void} Internal defaults.
      */
     private _initializeDefaults;
-    appearance: string;
-    disabled: boolean;
-    msgSelectionMissing: string;
-    noFilter: boolean;
-    noValidate: boolean;
+    appearance: string | undefined;
+    disabled: boolean | undefined;
+    msgSelectionMissing: string | undefined;
+    noFilter: boolean | undefined;
+    noValidate: boolean | undefined;
     optionActive: any;
-    persistInput: boolean;
-    required: boolean;
+    persistInput: boolean | undefined;
+    required: boolean | undefined;
+    value: any;
     typedValue: any;
-    behavior: string;
-    clearBtnFocused: boolean;
-    checkmark: boolean;
-    dvInputOnly: boolean;
-    fullscreenBreakpoint: string;
-    matchWidth: boolean;
-    shape: string;
-    size: string;
-    triggerIcon: boolean;
-    placement: string;
-    offset: number;
-    noFlip: boolean;
-    shift: boolean;
-    autoPlacement: boolean;
+    behavior: string | undefined;
+    clearBtnFocused: boolean | undefined;
+    checkmark: boolean | undefined;
+    dvInputOnly: boolean | undefined;
+    fullscreenBreakpoint: string | undefined;
+    matchWidth: boolean | undefined;
+    shape: string | undefined;
+    size: string | undefined;
+    triggerIcon: boolean | undefined;
+    placement: string | undefined;
+    offset: number | undefined;
+    noFlip: boolean | undefined;
+    shift: boolean | undefined;
+    autoPlacement: boolean | undefined;
     dropdownTag: any;
     bibtemplateTag: any;
     inputTag: any;
     helpTextTag: any;
-    availableOptions: any[] | any[];
+    availableOptions: any[] | any[] | undefined;
     dropdownId: any;
     dropdownOpen: any;
-    triggerExpandedState: boolean;
-    _expandedTimeout: NodeJS.Timeout;
-    _inFullscreenTransition: boolean;
+    triggerExpandedState: boolean | undefined;
+    _expandedTimeout: number | null | undefined;
+    _inFullscreenTransition: boolean | undefined;
     errorMessage: any;
-    isHiddenWhileLoading: boolean;
-    largeFullscreenHeadline: boolean;
-    onDark: boolean;
+    isHiddenWhileLoading: boolean | undefined;
+    largeFullscreenHeadline: boolean | undefined;
+    onDark: boolean | undefined;
     optionSelected: any;
     runtimeUtils: any;
-    touched: boolean;
-    validation: AuroFormValidation;
+    touched: boolean | undefined;
+    validation: AuroFormValidation | undefined;
     validity: any;
     /**
      * Returns the current value of the input element within the combobox.
@@ -481,9 +482,8 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private configureMenu;
-    menu: Element;
-    defaultMenuShape: string;
-    value: any;
+    menu: Element | null | undefined;
+    defaultMenuShape: string | null | undefined;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private
@@ -512,14 +512,14 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private handleInputValueChange;
-    _syncingBibValue: boolean;
+    _syncingBibValue: boolean | undefined;
     /**
      * Binds all behavior needed to the combobox after rendering.
      * @private
      * @returns {void}
      */
     private configureCombobox;
-    menus: Element[];
+    menus: Element[] | undefined;
     firstUpdated(): void;
     dropdown: any;
     input: any;
@@ -550,7 +550,7 @@ export class AuroCombobox extends AuroElement {
      */
     validate(force?: boolean): void;
     updated(changedProperties: any): void;
-    hasValue: boolean;
+    hasValue: boolean | undefined;
     /**
      * Applies slotted nodes to a target element with a new slot name.
      * @private

package/components/combobox/dist/index.js CHANGED Viewed

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
-var formkitVersion$2 = '202604231640';
+var formkitVersion$2 = '202604232250';
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -6215,7 +6215,7 @@ var styleCss$1$1 = css`.util_displayInline{display:inline}.util_displayInlineBlo
 var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
-var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
+var colorBaseCss = css`.wrapper{border-color:red;background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 var styleCss$1 = css`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
@@ -14280,6 +14280,7 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
+    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -14892,10 +14893,6 @@ class AuroCombobox extends AuroElement {
     });
     if (this.value && this.input.value && !this.menu.value) {
-      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
-        this.setMenuValue(this.value);
-      }
       this.syncValuesAndStates();
     }
@@ -15506,6 +15503,10 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
+    // Set the initial value in auro-menu if defined
+    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
+      this.menu.value = this.value;
+    }
   }
   /**
@@ -15586,16 +15587,10 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
-      if (this.menu && this.hasValue && this.menu.options) {
-        this.menu.options.forEach((opt) => {
-          if (!opt.hasAttribute('static')) {
-            opt.removeAttribute('hidden');
-          }
-        });
-      }
       if (this.behavior === 'suggestion') {
-        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        // if menu has an option that has matched value, then select it,
+        // otherwise clear the menu value since the input value doesn't match any option
+        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;

package/components/combobox/dist/registered.js CHANGED Viewed

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
-var formkitVersion$2 = '202604231640';
+var formkitVersion$2 = '202604232250';
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -6215,7 +6215,7 @@ var styleCss$1$1 = css`.util_displayInline{display:inline}.util_displayInlineBlo
 var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
-var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
+var colorBaseCss = css`.wrapper{border-color:red;background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 var styleCss$1 = css`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
@@ -14280,6 +14280,7 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
+    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -14892,10 +14893,6 @@ class AuroCombobox extends AuroElement {
     });
     if (this.value && this.input.value && !this.menu.value) {
-      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
-        this.setMenuValue(this.value);
-      }
       this.syncValuesAndStates();
     }
@@ -15506,6 +15503,10 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
+    // Set the initial value in auro-menu if defined
+    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
+      this.menu.value = this.value;
+    }
   }
   /**
@@ -15586,16 +15587,10 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
-      if (this.menu && this.hasValue && this.menu.options) {
-        this.menu.options.forEach((opt) => {
-          if (!opt.hasAttribute('static')) {
-            opt.removeAttribute('hidden');
-          }
-        });
-      }
       if (this.behavior === 'suggestion') {
-        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        // if menu has an option that has matched value, then select it,
+        // otherwise clear the menu value since the input value doesn't match any option
+        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;