@aurodesignsystem-dev/auro-formkit 0.0.0-pr1492.4 → 0.0.0-pr1493.0

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

@@ -12,8 +12,8 @@
  * @slot label - Defines the label content for the entire datepicker when `layout="snowflake"`.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
- * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
- * @slot popover_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell popover for the specified date.
+ * @slot date_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
+ * @slot popover_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell popover for the specified date.
  * @csspart dropdown - Use for customizing the style of the dropdown.
  * @csspart trigger - Use for customizing the style of the datepicker trigger.
  * @csspart input - Use for customizing the style of the datepicker inputs.
@@ -38,13 +38,10 @@ export class AuroDatePicker extends AuroElement {
     static get properties(): {
         /**
          * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
+         * @type {'default' | 'inverse'}
          * @default 'default'
          */
-        appearance: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        appearance: "default" | "inverse";
         /**
          * If declared, bib's position will be automatically calculated where to appear.
          * @default false
@@ -53,6 +50,20 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             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;
+        };
         /**
          * The last date that may be displayed in the calendar.
          */
@@ -60,6 +71,13 @@ export class AuroDatePicker extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Accessible label for the calendar grid containing the days of the month.
+         */
+        calendarGridLabel: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * The date that will first be visually rendered to the user in the calendar.
          */
@@ -101,24 +119,6 @@ export class AuroDatePicker extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        hasFocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * @private
-         */
-        hasValue: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * @private
-         */
-        hasAllValues: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         /**
          * Specifies the date format. The default is `mm/dd/yyyy`.
          */
@@ -142,6 +142,24 @@ export class AuroDatePicker extends AuroElement {
          * @default 'sm'
          */
         fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
+        /**
+         * @private
+         */
+        hasAllValues: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        hasValue: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /** Exposes inputmode attribute for input. */
         inputmode: {
             type: StringConstructor;
@@ -176,6 +194,12 @@ export class AuroDatePicker extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+        };
         /**
          * Names of all 12 months to render in the calendar.
          * When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`).
@@ -184,17 +208,24 @@ export class AuroDatePicker extends AuroElement {
             type: ArrayConstructor;
         };
         /**
-         * If declared, the bib will NOT flip to an alternate position
-         * when there isn't enough space in the specified `placement`.
+         * Accessible label for the next month navigation button.
          */
-        noFlip: {
-            type: BooleanConstructor;
+        navLabelNextMonth: {
+            type: StringConstructor;
             reflect: boolean;
         };
         /**
-         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
+         * Accessible label for the previous month navigation button.
          */
-        shift: {
+        navLabelPrevMonth: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, the bib will NOT flip to an alternate position
+         * when there isn't enough space in the specified `placement`.
+         */
+        noFlip: {
             type: BooleanConstructor;
             reflect: boolean;
         };
@@ -249,6 +280,41 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Label announced for cells after the range (or after start when no end is selected).
+         */
+        rangeLabelAfterRange: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for cells before the range start.
+         */
+        rangeLabelBeforeRange: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for the range end date cell.
+         */
+        rangeLabelEnd: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for cells within the selected range.
+         */
+        rangeLabelInRange: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for the range start date cell.
+         */
+        rangeLabelStart: {
+            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 ISO date strings (`YYYY-MM-DD`).
@@ -272,6 +338,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;
@@ -294,6 +361,13 @@ export class AuroDatePicker extends AuroElement {
         setCustomValidityValueMissing: {
             type: StringConstructor;
         };
+        /**
+         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
+         */
+        shift: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * Set true to make datepicker stacked style.
          */
@@ -301,6 +375,15 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Indicates whether the datepicker is in a dirty state (has been interacted with).
+         * @private
+         */
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * Specifies the `validityState` this element is in.
          */
@@ -320,15 +403,6 @@ export class AuroDatePicker extends AuroElement {
         valueEnd: {
             type: StringConstructor;
         };
-        /**
-         * Indicates whether the datepicker is in a dirty state (has been interacted with).
-         * @private
-         */
-        touched: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
@@ -359,6 +433,16 @@ 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;
+    calendarGridLabel: string;
     stacked: boolean;
     noValidate: boolean;
     validity: any;
@@ -368,6 +452,7 @@ export class AuroDatePicker extends AuroElement {
     calendarEndDate: any;
     calendarFocusDate: any;
     fullscreenBreakpoint: string;
+    _validLocale: string;
     placement: string;
     offset: number;
     noFlip: boolean;
@@ -436,7 +521,7 @@ export class AuroDatePicker extends AuroElement {
     /**
      * Handles click on the clear button.
      * @private
-     * @param {MouseEvent} event - The click event object.
+     * @param {MouseEvent} event - The mouse event from the clear button click.
      * @returns {void}
      */
     private handleClearClick;
@@ -469,7 +554,7 @@ export class AuroDatePicker extends AuroElement {
     /**
      * Common display value wrapper classes.
      * @private
-     * @return {Object} - An object containing the common classes for the display value wrapper.
+     * @returns {Object} Class map for Lit's classMap directive.
      */
     private get commonDisplayValueWrapperClasses();
     /**
@@ -509,21 +594,45 @@ export class AuroDatePicker extends AuroElement {
      * @param {String} time - Unix timestamp to be converted to a date object.
      * @returns {Date} Date formatted as a string.
      */
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get valueObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get valueEndObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get minDateObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get maxDateObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get calendarStartDateObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get calendarEndDateObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get centralDateObject(): Date | undefined;
-    /** @returns {Date|undefined} */
+    /**
+     * Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date.
+     * @returns {Date|undefined}
+     */
     get calendarFocusDateObject(): Date | undefined;
     /**
      * Converts a Unix timestamp (seconds) from the vendor calendar to an ISO date string.
@@ -557,6 +666,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
@@ -564,6 +680,7 @@ export class AuroDatePicker extends AuroElement {
      */
     private configureDropdown;
     dropdown: any;
+    centralDate: any;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private
@@ -631,6 +748,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.
@@ -641,10 +765,22 @@ export class AuroDatePicker extends AuroElement {
      * @private
      */
     private setHasValue;
+    /**
+     * Returns `true` when the datepicker has an active validation error.
+     * @returns {boolean}
+     */
     get hasError(): boolean;
-    updated(changedProperties: any): void;
+    /**
+     * Lifecycle method to check if the locale is valid.
+     * @ignore
+     * @param {Map} changedProperties - The map of properties that have changed since the last update.
+     * @returns {void}
+     */
+    willUpdate(changedProperties: Map<any, any>): void;
     format: string | undefined;
+    updated(changedProperties: any): void;
     previousTabIndex: string | null | undefined;
+    wasCellClick: boolean | undefined;
     /**
      * Handles the transfer of content between slots in the component.
      *
@@ -684,14 +820,14 @@ export class AuroDatePicker extends AuroElement {
      * Simple formatter that ONLY WORKS FOR US DATES.
      * Returns formatted date like Apr 21 or Dec 25.
      * @private
-     * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
+     * @param {Date} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
      * @returns {string}
      */
     private formatShortDate;
     /**
      * Format and render the provided date value.
      * @private
-     * @param {string} dateValue - The date value to format and render.
+     * @param {Date} date - The date value to format and render.
      * @returns {import('lit').TemplateResult}
      */
     private renderDisplayTextDate;

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/datepicker/dist/src/utilities.d.ts

@@ -1,11 +1,4 @@
 export class AuroDatepickerUtilities {
-    /**
-     * Converts an ISO date string (yyyy-mm-dd) to any display format.
-     * @param {string} isoStr - ISO date string.
-     * @param {string} format - Target display format (e.g. "mm/dd/yyyy", "dd/mm/yyyy").
-     * @returns {string|undefined}
-     */
-    toCustomFormat(isoStr: string, format: string): string | undefined;
     /**
      * Converts any date object to a date object representing the first day of the month.
      * @param {Object} date - Date to convert to the first day of the month.
@@ -19,13 +12,6 @@ export class AuroDatepickerUtilities {
      * @returns {Number}
      */
     monthDiff(date1: Object, date2: Object): number;
-    /**
-     * Function to format a number to two digits.
-     * @private
-     * @param {Number} num - Number to format.
-     * @returns {String}
-     */
-    private formatTwoDigits;
     /**
      * Function to generate checkmark svg.
      * @private

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/css-only.html

@@ -0,0 +1,57 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/css-only.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-dropdown | CSS only</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-dropdown's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./css-only.md');
+    </script>
+
+    <!-- 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>