@aurodesignsystem-dev/auro-formkit 0.0.0-pr1430.0 → 0.0.0-pr1431.1

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

@@ -142,7 +142,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -1687,9 +1687,9 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091433';
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// 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

@@ -134,7 +134,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -1679,9 +1679,9 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091433';
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// 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

@@ -94,7 +94,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -1632,9 +1632,9 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091433';
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// 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

@@ -94,7 +94,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -1632,9 +1632,9 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091433';
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// 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/demo/api.html

@@ -54,6 +54,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@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-dialog@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
 
     <script type="module" data-demo-script="true">

package/components/combobox/demo/api.js

@@ -5,6 +5,7 @@ import { resetStateExample } from '../apiExamples/reset-state';
 import { setupExternalSelectionExample } from '../apiExamples/external-selection';
 import { valueExample } from '../apiExamples/value';
 import { inDialogExample } from '../apiExamples/in-dialog';
+import { inDrawerExample } from '../apiExamples/in-drawer';
 import { persistentExample } from '../apiExamples/persistent';
 import { swapValueExample } from '../apiExamples/swap-value';
 
@@ -22,7 +23,8 @@ export function initExamples(initCount) {
     resetStateExample();
     setupExternalSelectionExample();
     valueExample();
-    inDialogExample();  
+    inDialogExample();
+    inDrawerExample();
     persistentExample();
     swapValueExample();
   } catch (err) {

package/components/combobox/demo/api.md

@@ -2097,6 +2097,81 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### In Drawer
+
+Example use of component within an `auro-drawer`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
+  <div>
+    <auro-button id="combobox-drawer-opener">Combobox in Drawer</auro-button>
+    <auro-drawer id="combobox-drawer">
+      <span slot="header">Combobox in Drawer</span>
+      <div slot="content">
+        <auro-combobox>
+          <span slot="bib.fullscreen.headline">Bib Header</span>
+          <span slot="label">Name</span>
+          <auro-menu>
+            <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+            <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+            <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+            <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+            <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+            <auro-menuoption static nomatch>No matching option</auro-menuoption>
+          </auro-menu>
+        </auro-combobox>
+      </div>
+    </auro-drawer>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
+
+```html
+<div>
+  <auro-button id="combobox-drawer-opener">Combobox in Drawer</auro-button>
+  <auro-drawer id="combobox-drawer">
+    <span slot="header">Combobox in Drawer</span>
+    <div slot="content">
+      <auro-combobox>
+        <span slot="bib.fullscreen.headline">Bib Header</span>
+        <span slot="label">Name</span>
+        <auro-menu>
+          <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+          <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+          <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+          <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+          <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+          <auro-menuoption static nomatch>No matching option</auro-menuoption>
+        </auro-menu>
+      </auro-combobox>
+    </div>
+  </auro-drawer>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
+
+```js
+export function inDrawerExample() {
+  document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#combobox-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Persistent Menu Option with a Custom Event
 
 This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.

package/components/combobox/demo/api.min.js

@@ -52,6 +52,17 @@ function inDialogExample() {
   });
 }
 
+function inDrawerExample() {
+  document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#combobox-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+}
+
 function persistentExample() {
   const persistentExample = document.querySelector('#persistent');
 
@@ -1421,10 +1432,19 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, _evt, ctx) {
-    if (ctx.isExpanded && ctx.isModal) {
+  Escape(component, evt, ctx) {
+    if (!ctx.isExpanded) {
+      return;
+    }
+
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
+    evt.stopPropagation();
+
+    if (ctx.isModal) {
       component.setTriggerInputFocus();
     }
+
+    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -1485,7 +1505,7 @@ const comboboxKeyboardStrategy = {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -3274,7 +3294,6 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
-    this.touchHandler = null;
 
     /**
      * @private
@@ -3692,28 +3711,6 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
-
-    // iOS Safari does not fire `click` on non-interactive elements, so
-    // tapping an inert backdrop never reaches the click handler above.
-    // Mirror the same outside-tap logic with a passive touchstart listener.
-    this.touchHandler = (evt) => {
-      const element = this.element;
-      if (!element?.bib) {
-        return;
-      }
-
-      // fullscreen (modal) dialog handles its own dismissal
-      if (element.bib.hasAttribute("isfullscreen")) {
-        return;
-      }
-
-      const path = evt.composedPath();
-      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
-        this.hideBib("click");
-      }
-    };
-
-    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -3729,11 +3726,6 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
-    if (this.touchHandler) {
-      window.removeEventListener("touchstart", this.touchHandler);
-      this.touchHandler = null;
-    }
-
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -4526,89 +4518,6 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$3 = '9.1.2';
 
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
-
-let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
-
-  /* eslint-disable jsdoc/require-param */
-
-  /**
-   * This will register a new custom element with the browser.
-   * @param {String} name - The name of the custom element.
-   * @param {Object} componentClass - The class to register as a custom element.
-   * @returns {void}
-   */
-  registerComponent(name, componentClass) {
-    if (!customElements.get(name)) {
-      customElements.define(name, class extends componentClass {});
-    }
-  }
-
-  /**
-   * Finds and returns the closest HTML Element based on a selector.
-   * @returns {void}
-   */
-  closestElement(
-    selector, // selector like in .closest()
-    base = this, // extra functionality to skip a parent
-    __Closest = (el, found = el && el.closest(selector)) =>
-      !el || el === document || el === window
-        ? null // standard .closest() returns null for non-found selectors also
-        : found
-          ? found // found a selector INside this element
-          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
-  ) {
-    return __Closest(base);
-  }
-  /* eslint-enable jsdoc/require-param */
-
-  /**
-   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
-   * @param {Object} elem - The element to check.
-   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
-   * @returns {void}
-   */
-  handleComponentTagRename(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    if (elemTag !== tag) {
-      elem.setAttribute(tag, true);
-    }
-  }
-
-  /**
-   * Validates if an element is a specific Auro component.
-   * @param {Object} elem - The element to validate.
-   * @param {String} tagName - The name of the Auro component to check against.
-   * @returns {Boolean} - Returns true if the element is the specified Auro component.
-   */
-  elementMatch(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    return elemTag === tag || elem.hasAttribute(tag);
-  }
-
-  /**
-   * Gets the text content of a named slot.
-   * @returns {String}
-   * @private
-   */
-  getSlotText(elem, name) {
-    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
-    const nodes = slot?.assignedNodes({ flatten: true }) || [];
-    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
-
-    return text || null;
-  }
-};
-
 /**
  * Computes display state once per keydown event.
  * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
@@ -5291,7 +5200,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604082129';
+var formkitVersion$2 = '202604091433';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -5397,7 +5306,7 @@ let AuroElement$2 = class AuroElement extends i$4 {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -5502,7 +5411,7 @@ class AuroDropdown extends AuroElement$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$2();
 
     /**
      * @private
@@ -5920,7 +5829,7 @@ class AuroDropdown extends AuroElement$2 {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2$1.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -13055,7 +12964,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604082129';
+var formkitVersion$1 = '202604091433';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14120,7 +14029,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091433';
 
 var styleCss$3 = i$7`.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}`;
 
@@ -14460,7 +14369,7 @@ class AuroHelpText extends i$4 {
   }
 }
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -14983,7 +14892,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   activateFirstEnabledAvailableOption() {
-    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled);
+    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.noMatch);
     this.updateActiveOption(firstEnabledOptionIndex);
   }
 
@@ -14997,7 +14906,7 @@ class AuroCombobox extends AuroElement {
 
     // Work backwards through the available options array to find the last enabled option
     for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
-      if (!this.availableOptions[index].disabled) {
+      if (!this.availableOptions[index].disabled && !this.availableOptions[index].noMatch) {
         lastEnabledOptionIndex = index;
         break;
       }
@@ -16337,6 +16246,14 @@ class AuroMenuOption extends AuroElement {
         reflect: true
       },
 
+      /**
+       * When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
+       */
+      noMatch: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Specifies that an option is selected.
        */
@@ -18120,7 +18037,8 @@ function initExamples(initCount) {
     resetStateExample();
     setupExternalSelectionExample();
     valueExample();
-    inDialogExample();  
+    inDialogExample();
+    inDrawerExample();
     persistentExample();
     swapValueExample();
   } catch (err) {