@aurodesignsystem-dev/auro-formkit 0.0.0-pr1510.2 → 0.0.0-pr1511.0

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

@@ -25,14 +25,6 @@ export class AuroCalendarCell extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * @deprecated Propagated from the legacy `auro-calendar.disabledDays`
-         * Unix-timestamp array. The cell honors it for backward compatibility
-         * (see the divergence-check fallback inside `isBlackout`), but
-         * consumers should migrate to `auro-datepicker.blackoutDates`
-         * (YYYY-MM-DD ISO strings). The calendar emits a one-time
-         * deprecation warning the first time a non-empty value is observed.
-         */
         disabledDays: {
             type: ArrayConstructor;
         };
@@ -219,7 +211,6 @@ export class AuroCalendarCell extends LitElement {
      */
     private handleSlotContent;
     firstUpdated(): void;
-    calendar: any;
     datepicker: any;
     _slotContentHandler: (() => void) | undefined;
     _cachedButton: Element | null | undefined;
@@ -235,8 +226,8 @@ export class AuroCalendarCell extends LitElement {
     auroPopover: any;
     updated(properties: any): void;
     /**
-     * Sets host-level ARIA so each cell exposes its date, selection state,
-     * and blackout status to assistive tech browsing the month grid.
+     * Updates ARIA attributes on the host element so that
+     * ariaActiveDescendantElement can expose cell info to the SR.
      * @private
      * @returns {void}
      */
@@ -250,9 +241,7 @@ export class AuroCalendarCell extends LitElement {
     focusButton(): void;
     /**
      * Imperatively marks this cell as active without triggering a Lit re-render.
-     * Buttons stay tabindex="-1" because DOM focus stays on the grid wrapper —
-     * arrow keys move the active cell imperatively and the live region carries
-     * the SR announcement.
+     * Note: buttons stay tabindex="-1" because the grid uses aria-activedescendant.
      * @returns {void}
      */
     setActive(): void;

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

@@ -118,13 +118,6 @@ export class AuroCalendar extends RangeDatepicker {
             type: ArrayConstructor;
         };
     };
-    /**
-     * Per-class flag that gates the `disabledDays` deprecation warning so it
-     * fires exactly once per page no matter how many calendars or rebuild
-     * cycles encounter the legacy array.
-     * @private
-     */
-    private static _warnedDisabledDaysDeprecation;
     /**
      * @private
      */
@@ -226,32 +219,6 @@ export class AuroCalendar extends RangeDatepicker {
      * @returns {void}
      */
     private updateActiveCellForVisibleMonth;
-    /**
-     * Schedules `callback` two animation frames out, giving the child
-     * `auro-formkit-calendar-month` and `auro-formkit-calendar-cell` elements
-     * a full render-and-paint cycle to settle before the callback reads or
-     * mutates DOM.
-     *
-     * Why two frames, not one:
-     * 1. Lit batches property updates and renders in a microtask, so frame N
-     *    schedules the render but the new DOM may not be painted yet.
-     * 2. Cells re-cache `_cachedButton` inside their own `updateComplete.then`,
-     *    which also lands a tick later. Reading buttons from frame N+1
-     *    (after both renders + cache refresh have flushed) reliably hits the
-     *    new month's cells.
-     *
-     * Used by every code path that calls `handleNextMonth`/`handlePrevMonth`
-     * and then needs to inspect the freshly-rendered cells (cross-month
-     * keyboard nav, boundary events, `updateActiveCellForVisibleMonth`).
-     * Do NOT collapse to a single rAF — it intermittently lands before
-     * `_cachedButton` is refreshed, which silently breaks focus restoration
-     * and `setActiveCell` lookups.
-     * @private
-     * @param {() => void} callback - Runs once after the month re-render and
-     * the cells' button caches have refreshed.
-     * @returns {void}
-     */
-    private _afterMonthRender;
     /**
      * Renders all of the auro-calendar-months HTML.
      * @private
@@ -277,20 +244,6 @@ export class AuroCalendar extends RangeDatepicker {
      * @returns {Array} Array of auro-formkit-calendar-month elements.
      */
     private getMonthComponents;
-    /**
-     * Picks the focusable cell whose date is closest to targetTs. Used as a
-     * fallback after a month-boundary nav when the exact target date isn't
-     * focusable — typically because the month re-render lagged or the date
-     * was filtered out by isOutOfRange. When two cells are equidistant, the
-     * navigation direction breaks the tie so the user moves the way they
-     * pressed (forward → later cell, backward → earlier cell).
-     * @private
-     * @param {Array} cells - Focusable cells from getAllFocusableCells.
-     * @param {Number} targetTs - Desired Unix timestamp (seconds).
-     * @param {'next'|'prev'} direction - Navigation direction.
-     * @returns {Object|null} The nearest cell, or null when cells is empty.
-     */
-    private pickNearestCell;
     /**
      * Gets all focusable cells across all rendered months.
      * @private
@@ -299,9 +252,9 @@ export class AuroCalendar extends RangeDatepicker {
     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. DOM focus
-     * stays on the grid wrapper; the live region (see getOrCreateLiveRegion)
-     * is what announces the active cell to assistive tech.
+     * 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}
      */
@@ -325,28 +278,6 @@ export class AuroCalendar extends RangeDatepicker {
      * @returns {void}
      */
     private handleGridFocusOut;
-    /**
-     * Returns a memoized Set of blackout timestamps (seconds) drawn from both
-     * the legacy `disabledDays` array and the datepicker's ISO `blackoutDates`.
-     * The cache invalidates when either source array's reference changes, which
-     * matches Lit's own reactive identity semantics for array properties.
-     * @private
-     * @returns {Set<Number>}
-     */
-    private _getBlackoutSet;
-    _blackoutSet: Set<number> | undefined;
-    _cachedBlackoutDisabledDays: any;
-    _cachedBlackoutDates: any;
-    /**
-     * One-time `console.debug` directing consumers from the legacy
-     * `disabledDays` Unix-timestamp API to the ISO `blackoutDates` API. Fires
-     * the first time `_getBlackoutSet` rebuilds from a non-empty
-     * `disabledDays`; subsequent calls (on this or any other AuroCalendar
-     * instance on the page) are silent.
-     * @private
-     * @returns {void}
-     */
-    private _warnDisabledDaysDeprecated;
     /**
      * Computes the initial active date from data properties alone — no DOM required.
      * Priority:
@@ -379,8 +310,8 @@ export class AuroCalendar extends RangeDatepicker {
     private isDateInRange;
     /**
      * Handles arrow key navigation on the calendar grid wrapper.
-     * Focus stays on the grid wrapper; only the visual active-cell indicator
-     * changes. The live region announces the new active cell.
+     * Focus stays on the grid wrapper; only ariaActiveDescendantElement
+     * and the visual active-cell indicator change.
      * @private
      * @param {KeyboardEvent} event - The keyboard event.
      * @returns {void}
@@ -426,9 +357,7 @@ export class AuroCalendar extends RangeDatepicker {
      */
     private getRangePositionLabel;
     /**
-     * Checks whether a given date is a blackout date. Delegates to the
-     * memoized `_getBlackoutSet` so the YYYY-MM-DD parsing and the
-     * legacy/ISO merge rules live in exactly one place (see `blackoutUtils.js`).
+     * 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.
@@ -498,19 +427,6 @@ export class AuroCalendar extends RangeDatepicker {
      * @returns {void}
      */
     private announceSelection;
-    /**
-     * Writes `dateStr` to the live region. If the dropdown's dialog hasn't
-     * mounted yet (so getOrCreateLiveRegion can't attach), retries on the
-     * next animation frame up to MAX_LIVE_REGION_RETRIES instead of silently
-     * dropping the announcement. The retry uses the same `_announceRafId`
-     * the double-rAF below uses, so a newer announceSelection call (or
-     * disconnectedCallback) cancels any in-flight retry.
-     * @private
-     * @param {String} dateStr - The localized date string to announce.
-     * @param {Number} attempts - Number of prior retry attempts.
-     * @returns {void}
-     */
-    private _deliverAnnouncement;
     /**
      * Debounced version of announceSelection for focus navigation.
      * Uses the assertive live region with a 150ms debounce so only the

package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts}

@@ -61,7 +61,6 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Label announced for blackout (disabled but in-range) date cells.
-         * @default 'unavailable'
          */
         blackoutLabel: {
             type: StringConstructor;
@@ -76,7 +75,6 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Accessible label for the calendar grid containing the days of the month.
-         * @default 'Calendar days of the month'
          */
         calendarGridLabel: {
             type: StringConstructor;
@@ -213,7 +211,6 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Accessible label for the next month navigation button.
-         * @default 'Next month'
          */
         navLabelNextMonth: {
             type: StringConstructor;
@@ -221,7 +218,6 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Accessible label for the previous month navigation button.
-         * @default 'Previous month'
          */
         navLabelPrevMonth: {
             type: StringConstructor;
@@ -287,11 +283,7 @@ export class AuroDatePicker extends AuroElement {
             reflect: boolean;
         };
         /**
-         * Label announced for cells after a fully selected range (both
-         * `dateFrom` and `dateTo` are set). While a range is still being
-         * picked (`dateFrom` set, `dateTo` unset), focused cells past the
-         * start use `rangeLabelEndPreview` instead.
-         * @default 'after range'
+         * Label announced for cells after the range (or after start when no end is selected).
          */
         rangeLabelAfterRange: {
             type: StringConstructor;
@@ -299,7 +291,6 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Label announced for cells before the range start.
-         * @default 'before range'
          */
         rangeLabelBeforeRange: {
             type: StringConstructor;
@@ -307,25 +298,13 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Label announced for the range end date cell.
-         * @default 'range end'
          */
         rangeLabelEnd: {
             type: StringConstructor;
             reflect: boolean;
         };
-        /**
-         * Label announced for the focused cell while previewing a range end
-         * (dateFrom set, dateTo not yet selected). Tells AT users that
-         * pressing Enter would commit this cell as the range end.
-         * @default 'previewing range end'
-         */
-        rangeLabelEndPreview: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         /**
          * Label announced for cells within the selected range.
-         * @default 'in range'
          */
         rangeLabelInRange: {
             type: StringConstructor;
@@ -333,14 +312,13 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * Label announced for the range start date cell.
-         * @default 'range start'
          */
         rangeLabelStart: {
             type: StringConstructor;
             reflect: boolean;
         };
         /**
-         * Dates that the user should have for reference as part of their decision-making when selecting a date.
+         * 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`).
          */
         referenceDates: {
@@ -438,15 +416,6 @@ export class AuroDatePicker extends AuroElement {
      *
      */
     static register(name?: string): void;
-    /**
-     * Per-class dedup set used by `_warnInvalidLocale`. Static so the dedup
-     * spans every datepicker instance on the page; lives on the class (not
-     * at module scope) so it stays an encapsulated implementation detail of
-     * this component and does not interfere with WCA's class-JSDoc
-     * attachment.
-     * @private
-     */
-    private static _warnedInvalidLocales;
     /**
      * @private
      */
@@ -471,7 +440,6 @@ export class AuroDatePicker extends AuroElement {
     rangeLabelBeforeRange: string;
     rangeLabelInRange: string;
     rangeLabelAfterRange: string;
-    rangeLabelEndPreview: string;
     blackoutDates: any[];
     blackoutLabel: string;
     navLabelPrevMonth: string;
@@ -552,21 +520,6 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private handleClick;
-    /**
-     * Single AbortController shared by every listener registered in the
-     * configure* methods. Lets disconnectedCallback tear all of them down
-     * with one abort() call.
-     *
-     * The genuine leak risk is the listeners attached to children that can
-     * outlive the host if they get reparented — `this.dropdown`,
-     * `this.calendar`, and the inputs inside the dropdown's slot.
-     * Listeners attached to `this` (e.g. focusin/focusout on the host)
-     * form a self-contained reference graph that the GC can collect with
-     * the host anyway, but they share the same signal so the cleanup
-     * pattern stays uniform across all configure* sites.
-     * @private
-     */
-    private _listenerAbortController;
     /**
      * Handles click on the clear button.
      * @private
@@ -684,26 +637,10 @@ export class AuroDatePicker extends AuroElement {
      */
     get calendarFocusDateObject(): Date | undefined;
     /**
-     * Converts a Unix timestamp (seconds) from the vendored range-datepicker
-     * (`src/vendor/wc-range-datepicker/day.js`) to an ISO date string.
-     *
-     * Timezone contract:
-     * - INPUT: `time` is assumed to be the seconds-since-epoch of **local
-     *   midnight** for the intended calendar day. The vendor's Day constructor
-     *   builds it via `date-fns format(date, 't')` from a locally-constructed
-     *   Date, so this assumption currently holds end-to-end.
-     * - OUTPUT: `dateFormatter.toISOFormatString` reads the Date's local
-     *   getFullYear/getMonth/getDate components, so the returned YYYY-MM-DD
-     *   string matches the local calendar day.
-     *
-     * If the vendor ever switches to emitting UTC-midnight timestamps, this
-     * conversion will silently shift the returned date by one day in zones
-     * west of UTC. Any vendor swap should re-verify this contract; the TZ
-     * regression suite (`npm run test:hst`, UTC-10) will catch the symptom.
-     *
+     * Converts a Unix timestamp (seconds) from the vendor calendar to an ISO date string.
      * @private
-     * @param {number} time - Unix timestamp (seconds), local midnight of the day.
-     * @returns {string} ISO date string (yyyy-mm-dd) reflecting the local calendar day.
+     * @param {number} time - Unix timestamp in seconds.
+     * @returns {string} ISO date string (yyyy-mm-dd).
      */
     private convertWcTimeToDate;
     /**
@@ -835,16 +772,6 @@ export class AuroDatePicker extends AuroElement {
      * @returns {boolean}
      */
     get hasError(): boolean;
-    /**
-     * Logs a one-time `console.debug` when an unsupported locale falls back to
-     * en-US. Deduped by the offending tag so noisy re-renders that resurface
-     * the same bad value stay quiet, but each new bad value still signals so
-     * consumers can spot the typo or missing tag.
-     * @private
-     * @param {string|undefined} badLocale - The locale value that failed.
-     * @returns {void}
-     */
-    private _warnInvalidLocale;
     /**
      * Lifecycle method to check if the locale is valid.
      * @ignore

package/components/dropdown/demo/customize.js

@@ -0,0 +1,9 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { AuroDropdown } from '../src/auro-dropdown.js';
+AuroDropdown.register();
+AuroDropdown.register('custom-dropdown');
+
+export function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+}

package/components/dropdown/demo/customize.min.js

@@ -3942,7 +3942,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202606252132';
+var formkitVersion = '202606252142';
 
 class AuroElement extends i {
   static get properties() {
@@ -5214,6 +5214,7 @@ class AuroDropdown extends AuroElement {
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${o(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"

package/components/dropdown/demo/demo-support.js

@@ -0,0 +1 @@
+export { renderPage, openAccordion } from '@aurodesignsystem/utils/demo-support';

package/components/dropdown/demo/getting-started.js

@@ -0,0 +1,9 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { AuroDropdown } from '../src/auro-dropdown.js';
+AuroDropdown.register();
+AuroDropdown.register('custom-dropdown');
+
+export function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+}

package/components/dropdown/demo/getting-started.min.js

@@ -3942,7 +3942,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202606252132';
+var formkitVersion = '202606252142';
 
 class AuroElement extends i {
   static get properties() {
@@ -5214,6 +5214,7 @@ class AuroDropdown extends AuroElement {
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${o(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"

package/components/dropdown/demo/index.js

@@ -0,0 +1,16 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { classicExample } from '../apiExamples/classic/basic.js';
+import { classicInverseExample } from '../apiExamples/classic/appearance-inverse.js';
+import { customExample } from '../apiExamples/custom.js';
+
+import { AuroDropdown } from '../src/auro-dropdown.js';
+AuroDropdown.register();
+AuroDropdown.register('custom-dropdown');
+
+export function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+  classicExample();
+  classicInverseExample();
+  customExample();
+}

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

@@ -3969,7 +3969,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202606252132';
+var formkitVersion = '202606252142';
 
 class AuroElement extends i {
   static get properties() {
@@ -5241,6 +5241,7 @@ class AuroDropdown extends AuroElement {
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${o(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"

package/components/dropdown/demo/styles.scss

@@ -0,0 +1 @@
+@import '@aurodesignsystem/config/demo-styles';

package/components/dropdown/dist/index.js

@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606252132';
+var formkitVersion = '202606252142';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -5146,6 +5146,7 @@ class AuroDropdown extends AuroElement {
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"

package/components/dropdown/dist/registered.js

@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606252132';
+var formkitVersion = '202606252142';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -5146,6 +5146,7 @@ class AuroDropdown extends AuroElement {
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"

package/components/form/demo/customize.js

@@ -0,0 +1,28 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+import { AuroForm } from '../src/auro-form.js';
+import './registerDemoDeps.js';
+import { AuroInput } from '@aurodesignsystem/auro-input';
+import { AuroDatePicker } from '@aurodesignsystem/auro-datepicker';
+import { disabledExample } from '../apiExamples/disabled.js';
+import { disableAfterEditExample } from '../apiExamples/disabled-after-edit.js';
+
+AuroInput.register('input-two');
+AuroDatePicker.register();
+AuroForm.register();
+AuroForm.register('custom-form');
+
+export async function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    await disabledExample();
+    await disableAfterEditExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}