@aurodesignsystem-dev/auro-formkit 0.0.0-pr1477.2 → 0.0.0-pr1480.0

package/components/datepicker/dist/src/auro-calendar-cell.d.ts

@@ -6,9 +6,6 @@ export class AuroCalendarCell extends LitElement {
         selected: {
             type: BooleanConstructor;
         };
-        hovered: {
-            type: BooleanConstructor;
-        };
         dateTo: {
             type: StringConstructor;
         };
@@ -31,9 +28,6 @@ export class AuroCalendarCell extends LitElement {
         disabledDays: {
             type: ArrayConstructor;
         };
-        hoveredDate: {
-            type: StringConstructor;
-        };
         isCurrentDate: {
             type: BooleanConstructor;
         };
@@ -46,11 +40,13 @@ export class AuroCalendarCell extends LitElement {
         renderForDateSlot: {
             type: BooleanConstructor;
         };
+        hasPopoverContent: {
+            type: BooleanConstructor;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     day: any;
     selected: boolean;
-    hovered: boolean;
     dateTo: any;
     dateFrom: any;
     month: any;
@@ -58,21 +54,23 @@ export class AuroCalendarCell extends LitElement {
     max: any;
     disabled: boolean;
     disabledDays: any[];
-    hoveredDate: any;
     isCurrentDate: boolean;
     _locale: any;
     dateStr: string | null;
     renderForDateSlot: boolean;
+    active: boolean;
+    hasPopoverContent: boolean;
     runtimeUtils: any;
     popoverTag: any;
     set locale(value: any);
     get locale(): any;
     /**
-     * Handles selected and hovered states of the calendar cell when the date changes.
+     * Handles selected state of the calendar cell when the selection changes.
+     * Also clears any imperative range preview classes so classMap is the
+     * sole source of truth after a selection update.
      * @private
      * @param {Number} dateFrom - Depart date.
      * @param {Number} dateTo - Return date.
-     * @param {Number} hoveredDate - Hovered date.
      * @param {Object} day - An object containing the dateFrom and day of month values.
      * @returns {void}
      */
@@ -85,12 +83,43 @@ export class AuroCalendarCell extends LitElement {
     private handleTap;
     /**
      * Handles user hover events and dispatches a custom event.
+     * Does NOT set any reactive properties — the range preview is handled
+     * imperatively by the calendar component to avoid O(N) re-renders.
      * @private
      * @returns {void}
      */
     private handleHover;
     /**
-     * Checks if the current date is a valid date depending on the min and max values.
+     * Handles focus events on the cell button.
+     * Dispatches a lightweight event for the calendar to handle SR
+     * announcements and range preview updates without triggering
+     * any Lit lifecycle updates.
+     * @private
+     * @returns {void}
+     */
+    private handleFocus;
+    /**
+     * Checks if the current date is outside the valid min/max range.
+     * Out-of-range cells are not focusable and are hidden from screen readers.
+     * @private
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @param {Number} min - The minimum date value.
+     * @param {Number} max - The maximum date value.
+     * @returns {Boolean} - True if the date is out of range.
+     */
+    private isOutOfRange;
+    /**
+     * Checks if the current date is a blackout date (in disabledDays but within range).
+     * Blackout cells are focusable but not selectable.
+     * @private
+     * @returns {Boolean} - True if the date is a blackout date.
+     */
+    private isBlackout;
+    /**
+     * Checks if the current date is disabled based on min/max range or the
+     * legacy disabledDays timestamp list.  Sets the `disabled` attribute on the
+     * host when the date falls outside the allowed range or appears in
+     * disabledDays. Note: blackout dates are handled separately by `isBlackout()`.
      * @private
      * @param {Object} day - An object containing the dateFrom and day of month values.
      * @param {Number} min - The minimum date value.
@@ -99,6 +128,25 @@ export class AuroCalendarCell extends LitElement {
      * @returns {Boolean} - True if the date is disabled.
      */
     private isEnabled;
+    /**
+     * Generates a unique cell ID in the format cell-YYYY-MM-DD.
+     * @private
+     * @returns {String} The unique cell ID.
+     */
+    private getCellId;
+    /**
+     * Generates a localized aria-label for the cell button using Intl.DateTimeFormat.
+     * Includes range position and blackout status.
+     * @private
+     * @returns {String} The aria-label string.
+     */
+    private getAriaLabel;
+    /**
+     * Determines the range position of this cell relative to the current selection.
+     * @private
+     * @returns {String|null} Range position label or null if not in range mode.
+     */
+    private getRangePosition;
     /**
      * Checks if the current date is the depart date.
      * @private
@@ -162,8 +210,61 @@ export class AuroCalendarCell extends LitElement {
     private handleSlotContent;
     firstUpdated(): void;
     datepicker: any;
+    _slotContentHandler: (() => void) | undefined;
+    _cachedButton: Element | null | undefined;
+    calendarMonth: any;
+    /**
+     * Configures the popover instance with the calendar month boundary.
+     * Called from firstUpdated and updated because the popover element is only
+     * rendered after hasPopoverContent becomes true (set by handleSlotContent).
+     * @private
+     * @returns {void}
+     */
+    private configurePopover;
     auroPopover: any;
     updated(properties: any): void;
+    /**
+     * Updates ARIA attributes on the host element so that
+     * ariaActiveDescendantElement can expose cell info to the SR.
+     * @private
+     * @returns {void}
+     */
+    private updateHostAria;
+    /**
+     * Programmatically focuses the cell's interactive button element.
+     * Uses focusVisible: true so the :focus-visible ring appears even when
+     * the bib was opened via mouse click (which sets mouse input modality).
+     * @returns {void}
+     */
+    focusButton(): void;
+    /**
+     * Imperatively marks this cell as active (tabindex="0") without
+     * triggering a Lit re-render.
+     * @returns {void}
+     */
+    setActive(): void;
+    /**
+     * Imperatively marks this cell as inactive (tabindex="-1") without
+     * triggering a Lit re-render.
+     * @returns {void}
+     */
+    clearActive(): void;
+    /**
+     * Updates range preview classes imperatively (no Lit re-render).
+     * Called by the calendar component when the hovered date changes
+     * during range selection (dateFrom set, dateTo not yet set).
+     * @param {Number} hoveredDate - Unix timestamp of the currently hovered/focused date.
+     * @param {Number} dateFrom - Unix timestamp of the selected departure date.
+     * @returns {void}
+     */
+    updateRangePreviewClasses(hoveredDate: number, dateFrom: number): void;
+    /**
+     * Clears all imperative range preview classes from the cell button.
+     * Called when a selection occurs so classMap becomes the sole source of truth.
+     * @returns {void}
+     */
+    clearRangePreviewClasses(): void;
+    renderCellButton(): import("lit-html").TemplateResult;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";

package/components/datepicker/dist/src/auro-calendar-month.d.ts

@@ -16,5 +16,42 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
      * @returns {String} The name of the month.
      */
     private computeCurrentMonthName;
+    /**
+     * Returns the unique heading ID for this month, used by aria-labelledby.
+     * @private
+     * @returns {String} The heading ID.
+     */
+    private getHeadingId;
+    dayFullNames: any[] | undefined;
+    /**
+     * Renders a day-of-week header with abbr attribute for the full day name.
+     * @private
+     * @param {String} dayOfWeek - The short day name.
+     * @param {Number} index - The index in the dayNamesOfTheWeek array.
+     * @returns {Object} The header HTML.
+     */
+    private renderDayOfWeek;
+    /**
+     * Returns all focusable cell elements (enabled + blackout, not out-of-range) in this month.
+     * @returns {Array} Array of auro-formkit-calendar-cell elements.
+     */
+    getFocusableCells(): any[];
+    /**
+     * Overrides the base class handler to prevent setting `this.hoveredDate`
+     * as a reactive property. Instead, just dispatches the event upward so
+     * the calendar can handle range preview imperatively.
+     * @private
+     * @param {CustomEvent} event - The date-is-hovered event from a cell.
+     * @returns {void}
+     */
+    private handleDateHovered;
+    /**
+     * Handles arrow key navigation within the month grid.
+     * Dispatches a cross-month navigation event when the boundary is reached.
+     * @private
+     * @param {KeyboardEvent} event - The keyboard event.
+     * @returns {void}
+     */
+    private handleGridKeyDown;
 }
 import { RangeDatepickerCalendar } from './vendor/wc-range-datepicker/range-datepicker-calendar.js';

package/components/datepicker/dist/src/auro-calendar.d.ts

@@ -123,6 +123,12 @@ export class AuroCalendar extends RangeDatepicker {
     visible: boolean;
     largeFullscreenHeadline: boolean;
     isFullscreen: boolean;
+    /**
+     * The date of the currently active cell (Unix timestamp).
+     * Only one cell across the entire calendar has tabindex="0" at a time.
+     * @private
+     */
+    private activeCellDate;
     /**
      * @private
      */
@@ -148,6 +154,20 @@ export class AuroCalendar extends RangeDatepicker {
      */
     private buttonTag;
     dropdown: any;
+    /**
+     * Announces the current month and year via the live region after navigation.
+     * @private
+     * @returns {void}
+     */
+    private announceMonthChange;
+    /**
+     * Recomputes and sets the active cell for the newly visible month after
+     * month navigation. Without this, activeCellDate can point at a date in
+     * the old month, leaving no tabindex="0" cell in the grid.
+     * @private
+     * @returns {void}
+     */
+    private updateActiveCellForVisibleMonth;
     /**
      * Renders all of the auro-calendar-months HTML.
      * @private
@@ -167,6 +187,163 @@ export class AuroCalendar extends RangeDatepicker {
      * @returns {void}
      */
     scrollMonthIntoView(date: string): void;
+    /**
+     * Gets all rendered month components.
+     * @private
+     * @returns {Array} Array of auro-formkit-calendar-month elements.
+     */
+    private getMonthComponents;
+    /**
+     * Gets all focusable cells across all rendered months.
+     * @private
+     * @returns {Array} Array of auro-formkit-calendar-cell elements.
+     */
+    private getAllFocusableCells;
+    /**
+     * Sets the active cell across all months. Only one cell has tabindex="0" at a time.
+     * Uses imperative DOM manipulation — no Lit re-render triggered.
+     * Also updates ariaActiveDescendantElement on the grid wrapper so
+     * screen readers announce the active cell without moving DOM focus.
+     * @param {Number} date - Unix timestamp of the cell to activate.
+     * @returns {void}
+     */
+    setActiveCell(date: number): void;
+    /**
+     * Focuses the calendar grid wrapper and sets the active cell.
+     * DOM focus stays on the grid wrapper; ariaActiveDescendantElement
+     * tells the screen reader which cell is "active".
+     * @returns {void}
+     */
+    focusActiveCell(): void;
+    /**
+     * Computes the initial active date from data properties alone — no DOM required.
+     * Priority:
+     *   1. Selected date (dateFrom) if within range
+     *   2. Today's date if not disabled (in-range and not blackout)
+     *   3. First future non-disabled date (scans day-by-day from today up to 1 year)
+     *   4. First previous non-disabled date (scans day-by-day from today up to 1 year)
+     *   5. First enabled date in finite [min, max] range
+     *   5b. First enabled date scanning forward from finite min (unbounded max)
+     *   5c. First enabled date scanning backward from finite max (unbounded min)
+     *   6. First in-range date (even if blackout) so focus can land somewhere
+     *   7. undefined — no valid target
+     *
+     * @private
+     * @param {Object} [options] - Optional settings.
+     * @param {boolean} [options.skipDateFrom=false] - When true, skip the selected-date
+     *   shortcut (step 1). Used after month navigation so the active cell lands in the
+     *   newly visible month instead of jumping back to the selected date's month.
+     * @returns {Number|undefined} Unix timestamp (seconds) of the date to activate, or undefined.
+     */
+    private computeActiveDate;
+    /**
+     * Handles arrow key navigation on the calendar grid wrapper.
+     * Focus stays on the grid wrapper; only ariaActiveDescendantElement
+     * and the visual active-cell indicator change.
+     * @private
+     * @param {KeyboardEvent} event - The keyboard event.
+     * @returns {void}
+     */
+    private handleGridKeyDown;
+    /**
+     * Handles cross-month boundary navigation events from month components.
+     * @private
+     * @param {CustomEvent} event - The boundary event with direction and source date info.
+     * @returns {void}
+     */
+    private handleMonthBoundary;
+    /**
+     * Handles cell activation events from month components.
+     * @private
+     * @param {CustomEvent} event - The activation event with target date.
+     * @returns {void}
+     */
+    private handleCellActivate;
+    /**
+     * Handles focus events from calendar cells.
+     * Updates the live region with an SR announcement and triggers
+     * the imperative range preview if applicable.
+     * @private
+     * @param {CustomEvent} event - The calendar-cell-focused event.
+     * @returns {void}
+     */
+    private handleCellFocused;
+    /**
+     * Builds a full SR announcement string for a focused cell date.
+     * Includes the localized date, range position, popover content,
+     * and blackout status.
+     * @private
+     * @param {Number} date - Unix timestamp (seconds) of the focused cell.
+     * @returns {String} The announcement string.
+     */
+    private buildFocusAnnouncement;
+    /**
+     * Determines the range position label for a given date.
+     * @private
+     * @param {Number} date - Unix timestamp (seconds).
+     * @returns {String|null} The range position label, or null.
+     */
+    private getRangePositionLabel;
+    /**
+     * Checks whether a given date is a blackout date.
+     * @private
+     * @param {Number} dateTs - Unix timestamp (seconds).
+     * @returns {Boolean} True if the date is blacked out.
+     */
+    private isDateBlackout;
+    /**
+     * Updates the range preview classes imperatively across all cells.
+     * Only active when in range mode with dateFrom set and dateTo not yet set.
+     * @private
+     * @param {Number} hoveredDate - Unix timestamp of the hovered/focused date.
+     * @returns {void}
+     */
+    private updateRangePreview;
+    /**
+     * Clears range preview classes from all cells.
+     * @private
+     * @returns {void}
+     */
+    private clearRangePreview;
+    /**
+     * Overrides the base class handler to prevent setting `this.hoveredDate`
+     * as a reactive property. Instead, handles the range preview imperatively.
+     * @private
+     * @param {CustomEvent} event - The hovered-date-changed event from a month.
+     * @returns {void}
+     */
+    private hoveredDateChanged;
+    /**
+     * Scrolls the calendar to ensure the month containing the active cell is visible.
+     * @private
+     * @returns {void}
+     */
+    private scrollToActiveCell;
+    /**
+     * Announces a date selection or focus change via the live region.
+     * @private
+     * @param {String} dateStr - The localized date string to announce.
+     * @returns {void}
+     */
+    private announceSelection;
+    /**
+     * Debounced version of announceSelection for focus navigation.
+     * Only announces the last focused date after rapid navigation pauses,
+     * preventing the screen reader from queueing up stale announcements
+     * that can't keep pace with arrow-key traversal.
+     * @private
+     * @param {String} dateStr - The localized date string to announce.
+     * @returns {void}
+     */
+    private announceFocusDebounced;
+    _focusAnnounceTimer: any;
+    /**
+     * Formats a Unix timestamp (seconds) as a localized date string for SR announcements.
+     * @private
+     * @param {String|Number} timestamp - Unix timestamp in seconds.
+     * @returns {String} Localized date string.
+     */
+    private formatAnnouncementDate;
     injectSlot(slotName: any, nodes: any): void;
     render(): import("lit-html").TemplateResult;
 }

package/components/datepicker/dist/src/auro-datepicker.d.ts

@@ -248,6 +248,69 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Label announced for the range start date cell.
+         */
+        rangeLabelStart: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for the range end date cell.
+         */
+        rangeLabelEnd: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for cells before the range start.
+         */
+        rangeLabelBeforeRange: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for cells within the selected range.
+         */
+        rangeLabelInRange: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for cells after the range (or after start when no end is selected).
+         */
+        rangeLabelAfterRange: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
+         */
+        blackoutDates: {
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for blackout (disabled but in-range) date cells.
+         */
+        blackoutLabel: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Accessible label for the previous month navigation button.
+         */
+        navLabelPrevMonth: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Accessible label for the next month navigation button.
+         */
+        navLabelNextMonth: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * Dates that the user should have for reference as part of their decision making when selecting a date.
          * This should be a JSON string array of dates in the format of `MM/DD/YYYY`.
@@ -271,6 +334,7 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Custom help text message to display when validity = `customError`.
+         * Also used as the validation message when a blackout date is typed into the input.
          */
         setCustomValidityCustomError: {
             type: StringConstructor;
@@ -355,6 +419,15 @@ export class AuroDatePicker extends AuroElement {
     required: boolean;
     onDark: boolean;
     range: boolean;
+    rangeLabelStart: string;
+    rangeLabelEnd: string;
+    rangeLabelBeforeRange: string;
+    rangeLabelInRange: string;
+    rangeLabelAfterRange: string;
+    blackoutDates: any[];
+    blackoutLabel: string;
+    navLabelPrevMonth: string;
+    navLabelNextMonth: string;
     stacked: boolean;
     noValidate: boolean;
     validity: any;
@@ -532,6 +605,13 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private notifyMonthChanged;
+    /**
+     * Attempts to focus the active calendar cell using a rAF retry loop.
+     * Shared by both fullscreen and desktop open paths.
+     * @private
+     * @returns {void}
+     */
+    private focusActiveCellWhenReady;
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private
@@ -606,6 +686,13 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     clear(): void;
+    /**
+     * Checks whether a formatted date string matches a blackout date.
+     * @private
+     * @param {string} dateStr - A date string in the component's configured format.
+     * @returns {boolean} True if the date is in the blackoutDates list.
+     */
+    private isBlackoutDate;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.
@@ -624,6 +711,7 @@ export class AuroDatePicker extends AuroElement {
     formattedFocusDate: boolean | undefined;
     formattedEndDate: boolean | undefined;
     formattedValue: boolean | undefined;
+    wasCellClick: boolean | undefined;
     formattedValueEnd: boolean | undefined;
     formattedMinDate: boolean | undefined;
     formattedMaxDate: boolean | undefined;

package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts

@@ -1,3 +1,5 @@
-export namespace datepickerKeyboardStrategy {
-    function Escape(component: any, evt: any): void;
-}
+export const datepickerKeyboardStrategy: {
+    Escape(component: any, evt: any, ctx: any): void;
+    Enter(component: any, evt: any, ctx: any): void;
+    ' '(component: any, evt: any, ctx: any): void;
+};

package/components/dropdown/demo/accessibility.md

@@ -28,12 +28,23 @@
 </ol>
 </section>
 <section>
+<auro-header level="2" id="desktopModal">Desktop Modal</auro-header>
+<p>When the <code>desktopModal</code> attribute is set, the dropdown behaves as a modal dialog on desktop viewports:</p>
+<ul>
+<li>All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown.</li>
+<li>Focus is trapped within the bib content using a Tab-key handler.</li>
+<li>The <code>inert</code> state and focus trap are automatically cleaned up when the bib is closed or the component is disconnected.</li>
+</ul>
+<p>In fullscreen mode, the native <code>&lt;dialog&gt;</code> <code>showModal()</code> API provides equivalent behavior, so <code>desktopModal</code> only applies to desktop-sized viewports.</p>
+</section>
+<section>
 <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/tabindex.md) -->
 <!-- The below content is automatically added from ./../docs/partials/tabindex.md -->
 <p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex 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>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
+<p>When the <code>desktopModal</code> attribute is set, focus is also trapped within the bib on desktop viewports. All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown until it is closed.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>

package/components/dropdown/demo/api.md

@@ -13,6 +13,7 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 | `appearance`              | `appearance`              | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
 | `autoPlacement`           | `autoPlacement`           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
 | `chevron`                 | `chevron`                 | `boolean`                                        |                  | If declared, the dropdown displays a chevron on the right. |
+| `desktopModal`            | `desktopModal`            | `boolean`                                        |                  | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
 | `disableEventShow`        | `disableEventShow`        | `boolean`                                        |                  | If declared, the dropdown will only show by calling the API .show() public method. |
 | `disableKeyboardHandling` | `disableKeyboardHandling` | `boolean`                                        |                  | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
 | `disabled`                | `disabled`                | `boolean`                                        |                  | If declared, the dropdown is not interactive.    |

package/components/dropdown/demo/customize.md

@@ -13,6 +13,7 @@
 <auro-anchorlink fluid href="#matchWidth" class="level2 body-xs">Match Width</auro-anchorlink>
 <auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
 <auro-anchorlink fluid href="#chevron" class="level2 body-xs">Chevron</auro-anchorlink>
+<auro-anchorlink fluid href="#desktopModal" class="level2 body-xs">Desktop Modal</auro-anchorlink>
 <auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled</auro-anchorlink>
 <auro-anchorlink fluid href="#error" class="level2 body-xs">Error</auro-anchorlink>
 <auro-anchorlink fluid href="#noToggle" class="level2 body-xs">No Toggle</auro-anchorlink>
@@ -569,6 +570,8 @@
 &lt;/auro-dropdown&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="desktopModal">Desktop Modal</auro-header>
+<p>Use the <code>desktopModal</code> attribute to make the dropdown behave as a modal dialog on desktop viewports. When set, all sibling elements on the page are marked <code>inert</code> and focus is trapped within the bib content. In fullscreen mode, the native <code>&lt;dialog&gt;</code> <code>showModal()</code> API provides equivalent behavior automatically.</p>
 <auro-header level="3" id="disabled">Disabled</auro-header>
 <p>Use the <code>disabled</code> attribute to disable interaction with the dropdown.</p>
 <div class="exampleWrapper">