@aurodesignsystem/auro-formkit 5.9.4 → 5.11.0

package/components/dropdown/dist/auro-dropdown.d.ts

@@ -2,7 +2,7 @@
  * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
  * @customElement auro-dropdown
  *
- * @slot - Default slot for the popover content.
+ * @slot - Default slot for the dropdown bib content.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
@@ -14,6 +14,14 @@
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
 export class AuroDropdown extends AuroElement {
+    static get shadowRootOptions(): {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     static get properties(): {
         /**
          * The value for the role attribute of the trigger element.
@@ -228,6 +236,15 @@ export class AuroDropdown extends AuroElement {
         tabIndex: {
             type: NumberConstructor;
         };
+        /**
+         * Accessible label for the dropdown bib dialog element.
+         * @private
+         */
+        bibDialogLabel: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
@@ -341,6 +358,15 @@ export class AuroDropdown extends AuroElement {
      * If not, trigger element will get focus.
      */
     focus(): void;
+    /**
+     * Sets the active descendant element for accessibility.
+     * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+     * This function is used in components that contain `auro-dropdown` to set the active descendant.
+     * @private
+     * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+     * @returns {void}
+     */
+    private setActiveDescendant;
     /**
      * Accessor for reusing the focusable entity query string.
      * @private

package/components/dropdown/dist/auro-dropdownBib.d.ts

@@ -51,6 +51,26 @@ export class AuroDropdownBib extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Accessible label for the dialog element, used when displayed as a modal.
+         * Applied via aria-labelledby on a visually hidden element rather than
+         * aria-label because iOS VoiceOver does not reliably read aria-label
+         * on <dialog> elements.
+         * @private
+         */
+        dialogLabel: {
+            type: StringConstructor;
+        };
+        /**
+         * Overrides the native role of the dialog element.
+         * For example, set to `"presentation"` on desktop combobox to prevent
+         * VoiceOver from announcing "listbox inside of a dialog".
+         * When `undefined`, the dialog keeps its native role.
+         * @private
+         */
+        dialogRole: {
+            type: StringConstructor;
+        };
     };
     /**
      * @private
@@ -63,6 +83,73 @@ export class AuroDropdownBib extends LitElement {
     updated(changedProperties: any): void;
     bibTemplate: any;
     firstUpdated(changedProperties: any): void;
+    /**
+     * Forwards the dialog's native `cancel` event (fired on ESC) as
+     * an `auro-bib-cancel` custom event so parent components can close.
+     * @param {HTMLDialogElement} dialog
+     * @private
+     */
+    private _setupCancelHandler;
+    /**
+     * 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
+     * @private
+     */
+    private _setupKeyboardBridge;
+    /**
+     * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+     *
+     * The showModal() function places the dialog in the browser's **top layer**,
+     * which is a separate rendering layer above the normal DOM. On mobile, the
+     * compositor processes visual-viewport panning before top-layer touch
+     * handling. This means the entire viewport — including the top-layer dialog
+     * — can be panned by a touch gesture, causing the page behind the dialog to
+     * scroll into view. To prevent this, we add a touchmove listener that cancels
+     * the event if the touch started outside the dialog or any scrollable child within it.
+     *
+     * @private
+     */
+    private _lockTouchScroll;
+    _touchMoveHandler: (event: any) => void;
+    /**
+     * Removes the touchmove listener added by _lockTouchScroll().
+     * @private
+     */
+    private _unlockTouchScroll;
+    open(modal?: boolean): void;
+    /**
+     * Closes the dialog.
+     */
+    close(): void;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";

package/components/dropdown/dist/iconVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "9.1.1";
+declare const _default: "9.1.2";
 export default _default;