@aurodesignsystem-dev/auro-formkit 0.0.0-pr1488.2 → 0.0.0-pr1489.1

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

@@ -46,6 +46,13 @@ export class AuroCalendarCell extends LitElement {
         renderForDateSlot: {
             type: BooleanConstructor;
         };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        hasPopoverContent: {
+            type: BooleanConstructor;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     day: any;
@@ -63,6 +70,8 @@ export class AuroCalendarCell extends LitElement {
     _locale: any;
     dateStr: string | null;
     renderForDateSlot: boolean;
+    active: boolean;
+    hasPopoverContent: boolean;
     runtimeUtils: any;
     popoverTag: any;
     set locale(value: any);
@@ -85,12 +94,33 @@ export class AuroCalendarCell extends LitElement {
     private handleTap;
     /**
      * Handles user hover events and dispatches a custom event.
+     * Always dispatches for range pickers so the preview updates correctly.
      * @private
      * @returns {void}
      */
     private handleHover;
     /**
-     * Checks if the current date is a valid date depending on the min and max values.
+     * 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 +129,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 +211,24 @@ export class AuroCalendarCell extends LitElement {
     private handleSlotContent;
     firstUpdated(): void;
     datepicker: any;
+    _slotContentHandler: (() => void) | 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;
+    /**
+     * Programmatically focuses the cell's interactive button element.
+     * @returns {void}
+     */
+    focusButton(): 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,33 @@ 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[];
+    /**
+     * 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,86 @@ 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.
+     * @param {Number} date - Unix timestamp of the cell to activate.
+     * @returns {void}
+     */
+    setActiveCell(date: number): void;
+    /**
+     * Focuses the currently active cell. If activeCellDate is set but no cell
+     * has the active attribute yet, sets it first. Waits for the cell's render
+     * to complete so the focused button is the final DOM element.
+     * @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 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;
+    /**
+     * Scrolls the calendar to ensure the month containing the active cell is visible.
+     * @private
+     * @returns {void}
+     */
+    private scrollToActiveCell;
+    /**
+     * Announces a date selection via the live region.
+     * @private
+     * @param {String} dateStr - The localized date string to announce.
+     * @returns {void}
+     */
+    private announceSelection;
+    /**
+     * 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">