@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.9 → 0.0.0-pr1411.0

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

@@ -1165,7 +1165,7 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
  * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
  *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
  */
-function createDisplayContext(component, options = {}) {
+function createDisplayContext$1(component, options = {}) {
   const dd = options.dropdown || component.dropdown;
   // isPopoverVisible reflects as the `open` attribute.
   // It reports whether the bib is open in any mode (popover or modal).
@@ -1195,11 +1195,11 @@ function createDisplayContext(component, options = {}) {
  * @param {Object} strategy - Map of key names to handler functions.
  * @param {Object} [options] - Optional config passed to createDisplayContext.
  */
-function applyKeyboardStrategy(component, strategy, options = {}) {
+function applyKeyboardStrategy$1(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
     if (typeof handler === 'function') {
-      const ctx = createDisplayContext(component, options);
+      const ctx = createDisplayContext$1(component, options);
       await handler(component, evt, ctx);
     }
   });
@@ -3455,11 +3455,10 @@ class AuroFloatingUI {
       return;
     }
 
-    const { activeElement } = document;
     // if focus is still inside of trigger or bib, do not close
     if (
-      this.element.contains(activeElement) ||
-      this.element.bib?.contains(activeElement)
+      this.element.matches(":focus") ||
+      this.element.matches(":focus-within")
     ) {
       return;
     }
@@ -4298,12 +4297,83 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$3 = '9.1.2';
 
+/**
+ * Computes display state once per keydown event.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return ctx;
+}
+
+/**
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
+ * Handles both sync and async handlers.
+ * @param {HTMLElement} component - The component to attach the listener to.
+ * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
+ */
+function applyKeyboardStrategy(component, strategy, options = {}) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
+    }
+  });
+}
+
 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)}`;
 
 var tokensCss$1$2 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
 
+/**
+ * Creates a keyboard strategy for dialog-specific key handling.
+ * All other keydown behavior is left to the browser's native bubbling path.
+ * @param {HTMLElement} bib - The dropdown bib element.
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
+ */
+// eslint-disable-next-line no-unused-vars
+function createDropdownBibKeyboardStrategy(bib) {
+  return {
+    // eslint-disable-next-line no-unused-vars
+    Enter(_dialog, event) {
+      // Floating UI handles Enter key to open the dropdown
+    },
+    // eslint-disable-next-line no-unused-vars
+    Escape(_dialog, event) {
+      // Floating UI handles Escape key to close the dropdown
+    }
+  };
+}
+
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 /* eslint-disable max-lines */
@@ -4428,11 +4498,7 @@ class AuroDropdownBib extends i$4 {
       },
 
       /**
-       * Set by auro-dropdown when a menu option is highlighted via
-       * aria-activedescendant. The dialog keyboard bridge checks this
-       * flag so that Enter selects the highlighted option instead of
-       * activating the focused interactive element (e.g. the trigger
-       * button, or the bibtemplate close button in fullscreen).
+       * Tracks whether a menu option is currently highlighted.
        * @private
        */
       hasActiveDescendant: {
@@ -4506,7 +4572,7 @@ class AuroDropdownBib extends i$4 {
 
     const dialog = this.shadowRoot.querySelector('dialog');
     this._setupCancelHandler(dialog);
-    this._setupKeyboardBridge(dialog);
+    applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
 
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -4533,92 +4599,6 @@ class AuroDropdownBib extends i$4 {
     });
   }
 
-  /**
-   * showModal() creates a closed focus scope — keyboard events inside
-   * the dialog's shadow DOM do NOT bubble out to the combobox/select
-   * keydown handlers in the parent shadow DOM. This handler bridges
-   * that gap by re-dispatching navigation keys so they cross the
-   * shadow boundary and reach the menu navigation logic in the parent
-   * component.
-   *
-   * The trade-off: intercepting these keys means native keyboard
-   * behaviors that would normally "just work" must be manually
-   * re-implemented here:
-   *
-   * - Enter on buttons: Custom elements (auro-button) don't get the
-   *   native Enter→click that <button> provides, so we call .click()
-   *   directly when Enter is pressed on a button-like element.
-   *
-   * - Tab: Intercepted and re-dispatched so parent components
-   *   (select/combobox) can select the active option and close the
-   *   dialog. The <dialog> provides containment and isolation
-   *   (inert background, VoiceOver focus trapping, top layer), while
-   *   the content inside is a role="listbox" navigated via
-   *   aria-activedescendant (options are not focusable). Tab keyboard
-   *   behavior follows listbox conventions (select + close) because
-   *   the dialog's native Tab trap only cycles between the close
-   *   button and browser chrome.
-   *
-   * - Escape: The native <dialog> fires a `cancel` event on ESC
-   *   (handled by _setupCancelHandler), so the re-dispatched Escape
-   *   is a secondary path for parent components that also listen for
-   *   Escape keydown.
-   *
-   * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
-   * @private
-   */
-  _setupKeyboardBridge(dialog) {
-    const navKeys = new Set([
-      'ArrowUp',
-      'ArrowDown',
-      'Enter',
-      'Escape',
-      'Tab'
-    ]);
-
-    dialog.addEventListener('keydown', (event) => {
-      if (!navKeys.has(event.key)) {
-        return;
-      }
-
-      // Custom elements (auro-button) don't get the native Enter→click
-      // behavior that <button> has. Find the button in the composed path
-      // and click it directly — but only when no menu option is
-      // highlighted. In fullscreen mode focus stays on the close button
-      // while arrow keys move the active-descendant highlight through
-      // the listbox. If the user presses Enter with an option
-      // highlighted, the intent is to select that option, not to click
-      // the close button. In that case we fall through and bridge the
-      // Enter key to the parent component's keyboard strategy.
-      if (event.key === 'Enter') {
-        if (!this.hasActiveDescendant) {
-          const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
-          const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
-          if (btn) {
-            event.preventDefault();
-            event.stopPropagation();
-            btn.click();
-            return;
-          }
-        }
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
-      const newEvent = new KeyboardEvent('keydown', {
-        key: event.key,
-        code: event.code,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      });
-      this.dispatchEvent(newEvent);
-    });
-  }
 
   /**
    * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
@@ -4993,7 +4973,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603310458';
+var formkitVersion$2 = '202604021512';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -5174,7 +5154,6 @@ class AuroDropdown extends AuroElement$2 {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
-    this.disableFocusTrap = false;
     this.error = false;
     this.tabIndex = 0;
     this.noToggle = false;
@@ -5272,9 +5251,8 @@ class AuroDropdown extends AuroElement$2 {
     // showModal() fires asynchronously via Lit's update cycle, which
     // falls outside the user activation window and causes iOS to
     // dismiss the keyboard.
-    if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
-      const useModal = !this.disableFocusTrap;
-      this.bibElement.value.open(useModal);
+    if (this.bibElement && this.bibElement.value) {
+      this.bibElement.value.open(this.isBibFullscreen);
     }
   }
 
@@ -5387,14 +5365,6 @@ class AuroDropdown extends AuroElement$2 {
         reflect: true
       },
 
-      /**
-       * If declared, the focus trap inside of bib will be turned off.
-       */
-      disableFocusTrap: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -5668,7 +5638,7 @@ 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
-        const useModal = this.isBibFullscreen && !this.disableFocusTrap;
+        const useModal = this.isBibFullscreen;
         this.bibElement.value.open(useModal);
       } else {
         this.bibElement.value.close();
@@ -5678,7 +5648,7 @@ class AuroDropdown extends AuroElement$2 {
     // 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.disableFocusTrap;
+      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
       this.bibElement.value.open(useModal);
     }
@@ -5790,7 +5760,7 @@ class AuroDropdown extends AuroElement$2 {
    * @private
    */
   updateFocusTrap() {
-    if (this.isPopoverVisible && !this.disableFocusTrap) {
+    if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
         // Desktop: show() doesn't trap focus, so use FocusTrap
         this.focusTrap = new FocusTrap(this.bibContent);
@@ -12757,7 +12727,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603310458';
+var formkitVersion$1 = '202604021512';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13796,7 +13766,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603310458';
+var formkitVersion = '202604021512';
 
 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}`;
 
@@ -15290,7 +15260,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    applyKeyboardStrategy(this, comboboxKeyboardStrategy, {
+    applyKeyboardStrategy$1(this, comboboxKeyboardStrategy, {
       // In modal mode the input moves into the bib; route keyboard events to that element instead.
       inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
     });
@@ -16299,7 +16269,7 @@ class AuroMenuOption extends AuroElement {
     });
 
     return u$7`
-      <div class="${classes}">
+      <div class="${classes}" aria-disabled="${this.disabled ? 'true' : 'false'}">
         ${this.selected && !this.noCheckmark
         ? this.generateIconHtml(checkmarkIcon.svg)
         : undefined}
@@ -17070,10 +17040,10 @@ class AuroMenu extends AuroElement {
 
     // Event Bindings
 
-    /**
-     * @private
-     */
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    // /**
+    //  * @private
+    //  */
+    // this.handleKeyDown = this.handleKeyDown.bind(this);
 
 
     /**
@@ -17422,7 +17392,7 @@ class AuroMenu extends AuroElement {
 
     this.provideContext();
 
-    this.addEventListener('keydown', this.handleKeyDown);
+    // this.addEventListener('keydown', this.handleKeyDown);
     this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
     this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.addEventListener('slotchange', this.handleSlotChange);
@@ -17430,7 +17400,7 @@ class AuroMenu extends AuroElement {
   }
 
   disconnectedCallback() {
-    this.removeEventListener('keydown', this.handleKeyDown);
+    // this.removeEventListener('keydown', this.handleKeyDown);
     this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
     this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.removeEventListener('slotchange', this.handleSlotChange);
@@ -17571,26 +17541,33 @@ class AuroMenu extends AuroElement {
 
   // Event Handlers
 
-  /**
-   * Handles keyboard navigation.
-   * @private
-   * @param {KeyboardEvent} event - Event object from the browser.
-   */
-  handleKeyDown(event) {
-    event.preventDefault();
-    switch (event.key) {
-      case "ArrowDown":
-        this.menuService.highlightNext();
-        break;
-      case "ArrowUp":
-        this.menuService.highlightPrevious();
-        break;
-      case "Tab":
-      case "Enter":
-        this.menuService.selectHighlightedOption();
-        break;
-    }
-  }
+  // /**
+  //  * Handles keyboard navigation.
+  //  * @private
+  //  * @param {KeyboardEvent} event - Event object from the browser.
+  //  */
+  // handleKeyDown(event) {
+  //   // Update to Chris keyboard handler
+  //   // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
+  //   event.preventDefault();
+  //   switch (event.key) {
+  //     case "ArrowDown":
+  //       console.warn("ArrowDown key is pressed and heard from menu");
+  //       this.menuService.highlightNext();
+  //       break;
+  //     case "ArrowUp":
+  //       console.warn("ArrowUp key is pressed and heard from menu");
+  //       this.menuService.highlightPrevious();
+  //       break;
+  //     case "Tab":
+  //     case "Enter":
+  //       this.menuService.selectHighlightedOption();
+  //       // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
+  //       break;
+  //     default:
+  //       break;
+  //   }
+  // }
 
   /**
    * Navigates the menu options in the specified direction.

package/components/combobox/demo/keyboardBehavior.html

@@ -76,5 +76,6 @@
 
     <!-- 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/keyboardBehavior.md

@@ -8,7 +8,7 @@
         <li><strong>Input</strong></li>
         <li><strong>Clear button:</strong> only shown when the input has a value.</li>
       </ol>
-      <p>Each focusable element <em>(when shown)</em> participates in the browser windows default <code>tabindex</code> sequence.</p>
+      <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
       <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
       <p>On <strong>large viewport devices</strong> (e.g., desktop browser, tablet) there is no focusable content inside the component bib.</p>
       <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which may be tabbed through naturally.</p>
@@ -16,7 +16,7 @@
       <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
       <!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
       <div class="note">
-        <p><i><strong>Static vs Dynamic Option List:</strong> The <strong>expanded</strong> state can never be applied without list options rendered into the DOM. Since the component supports dynamic option lists generated <em>after</em> a value is typed into the <strong>input</strong>, certain key events (as noted in the <strong>Current State</strong> column of the table below) only function with the option list rendered into the DOM.</p>
+        <p><strong>Static vs Dynamic Option List:</strong> The <strong>expanded</strong> state can never be applied without list options rendered into the DOM. Since the component supports dynamic option lists generated <em>after</em> a value is typed into the <strong>input</strong>, certain key events (as noted in the <strong>Current State</strong> column of the table below) only function with the option list rendered into the DOM.</p>
       </div>
       <table>
         <thead>
@@ -43,7 +43,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs depending on viewport size.
+                <strong>Note:</strong> Includes both trigger and bib content inputs depending on viewport size.
               </div>
             </td>
             <td>
@@ -63,7 +63,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -83,7 +83,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -104,7 +104,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -124,7 +124,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -144,7 +144,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -158,7 +158,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -220,13 +220,13 @@
             </td>
           </tr>
           <tr>
-            <td>Esc</td>
+            <td>Escape</td>
             <td>-</td>
             <td>Expanded</td>
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -240,7 +240,7 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
@@ -254,23 +254,22 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
               </div>
             </td>
             <td>
-              The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.</i>
-              </div>
+              The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.
             </td>
           </tr>
           <tr>
             <td>
               Input clear button, <strong>NOT</strong> the input element
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content input clear buttons.
+                <strong>Note:</strong> Includes both trigger and bib content input clear buttons.
               </div>
             </td>
             <td>
-              <span style="background-color: pink; color: red;">&nbsp;????&nbsp;&nbsp;</span>
+              <span style="background-color: pink; color: red;">&nbsp;What do we do here?&nbsp;&nbsp;</span>
             </td>
           </tr>
           <tr>
@@ -279,13 +278,13 @@
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
-                <i><strong>Note:</strong> Includes both trigger and bib content inputs.
+                <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.
               <div class="note">
-                <i><strong>Note:</strong> the bib will <strong>NOT</strong> close and the page will <strong>NOT</strong> navigate to the previous focusable element in the tabindex order.</i>
+                <strong>Note:</strong> the bib will <strong>NOT</strong> close and the page will <strong>NOT</strong> navigate to the previous focusable element in the tabindex order.
               </div>
             </td>
           </tr>
@@ -295,8 +294,8 @@
       <div class="note">
         <p><strong>Note:</strong> The following keyboard behavior is unsupported at this time:</p>
         <ul>
-          <li><strong>PageUp:</strong> The browser advances the <code>focused</code> option by approximately one <strong>page</strong> of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly focused option is brought into view, usually aligning near the bottom of the visible list.</li>
-          <li><strong>PageDown:</strong> The browser moves the <code>focused</code> option up by approximately one <strong>page</strong> of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly focused option is brought into view, often aligning near the top of the visible list.</li>
+          <li><strong>PageUp:</strong> The browser moves the <code>focused</code> option up by approximately one <strong>page</strong> of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly focused option is brought into view, usually aligning near the top of the visible list.</li>
+          <li><strong>PageDown:</strong> The browser advances the <code>focused</code> option down by approximately one <strong>page</strong> of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly focused option is brought into view, often aligning near the bottom of the visible list.</li>
         </ul>
       </div>
     </div>