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

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

@@ -1290,7 +1290,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -1313,7 +1313,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -4662,7 +4662,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
   });
 }
 
-var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -5293,7 +5293,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605190111';
+var formkitVersion$2 = '202605192014';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -5473,7 +5473,6 @@ class AuroDropdown extends AuroElement$2 {
   _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
-    this.desktopModal = false;
     this.disabled = false;
     this.disableKeyboardHandling = false;
     this.error = false;
@@ -5654,14 +5653,6 @@ class AuroDropdown extends AuroElement$2 {
         reflect: true
       },
 
-      /**
-       * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
-       */
-      desktopModal: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
        */
@@ -5949,15 +5940,6 @@ class AuroDropdown extends AuroElement$2 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearPageInert();
-    if (this._bibTabHandler) {
-      this.removeEventListener('keydown', this._bibTabHandler);
-      this._bibTabHandler = undefined;
-    }
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
-    }
     if (this.floater) {
       this.floater.hideBib('disconnect');
       this.floater.disconnect();
@@ -5985,45 +5967,19 @@ class AuroDropdown extends AuroElement$2 {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        this.bibElement.value.open(this.isBibFullscreen);
-        this.updateFocusTrap();
-
-        // Desktop modal: make siblings inert so content outside is not interactive
-        if (this.desktopModal && !this.isBibFullscreen) {
-          this._setPageInert();
-        }
+        const useModal = this.isBibFullscreen;
+        this.bibElement.value.open(useModal);
       } else {
         this.bibElement.value.close();
-        this._clearPageInert();
       }
     }
 
     // When fullscreen strategy changes while open, re-open dialog with correct mode
     // (e.g. resizing from desktop → mobile while dropdown is open)
     if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
+      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
-      this.bibElement.value.open(this.isBibFullscreen);
-
-      // Re-initialize focus management for the new strategy
-      this.updateFocusTrap();
-
-      // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
-      if (this.desktopModal && !this.isBibFullscreen) {
-        this._setPageInert();
-      } else {
-        this._clearPageInert();
-      }
-    }
-
-    // Handle desktopModal toggled while the dropdown is already open.
-    // Re-initialize focus trapping and page inert state to match the new mode.
-    if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
-      this.updateFocusTrap();
-      if (this.desktopModal) {
-        this._setPageInert();
-      } else {
-        this._clearPageInert();
-      }
+      this.bibElement.value.open(useModal);
     }
   }
 
@@ -6033,14 +5989,8 @@ class AuroDropdown extends AuroElement$2 {
    * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
    */
   handleDropdownToggle(event) {
+    this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
-
-    // Tear down FocusTrap when closing. Creation happens in updated()
-    // after the dialog is open so getFocusableElements can find content.
-    if (!this.isPopoverVisible) {
-      this.updateFocusTrap();
-    }
-
     const eventType = event.detail.eventType || "unknown";
     if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
       this.trigger.focus();
@@ -6139,176 +6089,19 @@ class AuroDropdown extends AuroElement$2 {
    * @private
    */
   updateFocusTrap() {
-    // Always clean up existing handlers/traps before setting up new ones
-    // to prevent duplicate listeners on repeated calls.
-    if (this._bibTabHandler) {
-      this.removeEventListener('keydown', this._bibTabHandler);
-      this._bibTabHandler = undefined;
-    }
-
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
-    }
-
     if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
-        if (this.desktopModal) {
-          // Desktop modal: trap focus only within the bib content.
-          // Can't use FocusTrap on the bib element because keydown events
-          // from slotted content bubble through the dropdown host (light DOM),
-          // not through the bib (shadow projection target). Using FocusTrap
-          // on the dropdown would include the trigger in the tab cycle.
-          // Instead, listen for Tab on the dropdown and manually wrap focus
-          // within the bib's focusable elements.
-          this._bibTabHandler = (event) => {
-            if (event.key !== 'Tab') {
-              return;
-            }
-
-            // Collect focusable elements from the bib content.
-            const focusables = getFocusableElements(this.bibContent);
-
-            // Fallback: try from slotted content directly
-            if (!focusables.length) {
-              const slot = this.shadowRoot.querySelector('.slotContent slot');
-              const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
-
-              for (const node of assignedNodes) {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                  focusables.push(...getFocusableElements(node));
-                }
-              }
-            }
-
-            if (!focusables.length) {
-              return;
-            }
-
-            event.preventDefault();
-
-            const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
-
-            // Walk the active element chain through shadow roots
-            const actives = this._getActiveElements();
-
-            let idx = focusables.findIndex((el) => actives.includes(el));
-
-            if (idx === -1) { // eslint-disable-line no-magic-numbers
-              // Focus is not on a known element — move to first/last
-              idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
-            }
-
-            // Try each element in order, skipping any that can't receive focus
-            // (e.g. hidden elements, elements in collapsed sections)
-            for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
-              let nextIdx = idx + direction;
-
-              // Wrap around
-              if (nextIdx < 0) {
-                nextIdx = focusables.length - 1;
-              } else if (nextIdx >= focusables.length) {
-                nextIdx = 0;
-              }
-
-              focusables[nextIdx].focus();
-
-              // Verify focus actually moved to the target
-              const newActives = this._getActiveElements();
-
-              if (newActives.includes(focusables[nextIdx])) {
-                return;
-              }
-
-              // Focus didn't stick — skip this element and try the next
-              idx = nextIdx;
-            }
-          };
-          this.addEventListener('keydown', this._bibTabHandler);
-
-          // Move initial focus into the bib content, matching FocusTrap behavior
-          requestAnimationFrame(() => {
-            const focusables = getFocusableElements(this.bibContent);
-            if (focusables.length) {
-              focusables[0].focus();
-            }
-          });
-        } else {
-          // Normal desktop: use FocusTrap on the bib element
-          this.focusTrap = new FocusTrap(this.bibContent);
-          this.focusTrap.focusFirstElement();
-        }
+        // Desktop: show() doesn't trap focus, so use FocusTrap
+        this.focusTrap = new FocusTrap(this.bibContent);
+        this.focusTrap.focusFirstElement();
       }
       // Fullscreen: showModal() provides native focus trapping
-    }
-  }
-
-  /**
-   * Returns the chain of active (focused) elements through shadow roots.
-   * @private
-   * @returns {Array<HTMLElement>}
-   */
-  _getActiveElements() {
-    let { activeElement } = document;
-    const actives = [activeElement];
-
-    while (activeElement?.shadowRoot?.activeElement) {
-      activeElement = activeElement.shadowRoot.activeElement;
-      actives.push(activeElement);
-    }
-
-    return actives;
-  }
-
-  /**
-   * Sets `inert` on sibling elements of the dropdown's top-level host
-   * so that content outside the dropdown is not interactive while the modal is open.
-   * Walks up through shadow DOM boundaries to find the outermost host element
-   * in the light DOM, then sets `inert` on siblings at each ancestor level
-   * to ensure all page content outside the host subtree is inert.
-   * @private
-   */
-  _setPageInert() {
-    if (this._inertSiblings) {
       return;
     }
 
-    this._inertSiblings = [];
-
-    // Walk up through shadow DOM boundaries to find the topmost host
-    // element in the light DOM. For example, if this dropdown is inside
-    // auro-datepicker's shadow DOM, we walk up to the datepicker element
-    // so we set inert on its siblings — not on the datepicker itself.
-    let host = this;
-    while (host.getRootNode() instanceof ShadowRoot) {
-      host = host.getRootNode().host;
-    }
-
-    // Walk up the ancestor chain, inerting siblings at each level
-    // to ensure the entire page outside the host subtree is inert.
-    let current = host;
-    while (current.parentElement) {
-      const parent = current.parentElement;
-      for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
-          sibling.inert = true;
-          this._inertSiblings.push(sibling);
-        }
-      }
-      current = parent;
-    }
-  }
-
-  /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
-   * @private
-   */
-  _clearPageInert() {
-    if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
-      }
-      this._inertSiblings = undefined;
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
     }
   }
 
@@ -6547,7 +6340,6 @@ class AuroDropdown extends AuroElement$2 {
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
-          ?desktopmodal="${this.desktopModal}"
           .dialogLabel="${this.bibDialogLabel}"
           ${n$2(this.bibElement)}
           >
@@ -13253,7 +13045,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605190111';
+var formkitVersion$1 = '202605192014';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14207,14 +13999,6 @@ class AuroBibtemplate extends i$4 {
       large: {
         type: Boolean,
         reflect: true
-      },
-
-      /**
-       * If declared, the footer slot will be rendered even when not in fullscreen mode.
-       */
-      showFooter: {
-        type: Boolean,
-        reflect: true
       }
     };
   }
@@ -14317,7 +14101,7 @@ class AuroBibtemplate extends i$4 {
           <slot></slot>
         </div>
 
-      ${this.isFullscreen || this.showFooter ? u$7`
+      ${this.isFullscreen ? u$7`
         <div id="footerContainer">
           <slot name="footer"></slot>
         </div>` : null}
@@ -14326,7 +14110,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605190111';
+var formkitVersion = '202605192014';
 
 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}`;
 

package/components/combobox/demo/keyboard-behavior.md

@@ -30,7 +30,7 @@
 </thead>
 <tbody>
 <tr>
-<td rowspan="6">ArrowDown</td>
+<td rowspan="8">ArrowDown</td>
 <td rowspan="2">-</td>
 <td>Collapsed, list options have been populated</td>
 <td>
@@ -51,12 +51,17 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
 </td>
-<td>Opens the bib.</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -71,7 +76,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
@@ -91,7 +96,32 @@
 </td>
 </tr>
 <tr>
-<td rowspan="6">ArrowUp</td>
+<td rowspan="2">Control</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+              Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+              Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="8">ArrowUp</td>
 <td rowspan="2">-</td>
 <td>Collapsed, list options have been populated</td>
 <td>
@@ -112,12 +142,17 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
 </td>
-<td>Opens the bib.</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -132,7 +167,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Input element, <strong>NOT</strong> the input clear button
@@ -152,6 +187,31 @@
 </td>
 </tr>
 <tr>
+<td rowspan="2">Control</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+              Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
 <td>End</td>
 <td>-</td>
 <td>Expanded</td>