@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.4 → 0.0.0-pr1475.6

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

@@ -94,6 +94,7 @@ 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}
      */
@@ -210,6 +211,7 @@ 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.

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

@@ -160,6 +160,14 @@ export class AuroCalendar extends RangeDatepicker {
      * @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
@@ -211,9 +219,17 @@ export class AuroCalendar extends RangeDatepicker {
      *   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. undefined — no valid target
+     *   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;

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

@@ -334,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;
@@ -685,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.

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

@@ -3942,7 +3942,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 class AuroElement extends i {
   static get properties() {
@@ -4939,9 +4939,9 @@ class AuroDropdown extends AuroElement {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4949,13 +4949,15 @@ class AuroDropdown extends AuroElement {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }

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

@@ -3942,7 +3942,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 class AuroElement extends i {
   static get properties() {
@@ -4939,9 +4939,9 @@ class AuroDropdown extends AuroElement {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4949,13 +4949,15 @@ class AuroDropdown extends AuroElement {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }

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

@@ -3969,7 +3969,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 class AuroElement extends i {
   static get properties() {
@@ -4966,9 +4966,9 @@ class AuroDropdown extends AuroElement {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4976,13 +4976,15 @@ class AuroDropdown extends AuroElement {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }

package/components/dropdown/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]
+["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-dropdown.md","readme.md"]

package/components/dropdown/demo/why-dropdown.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/why-dropdown.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 | Why auro-dropdown</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('./why-dropdown.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>

package/components/dropdown/demo/why-dropdown.md

@@ -0,0 +1,97 @@
+<auro-header level="1" id="overview">Why auro-dropdown?</auro-header>
+<p>Native HTML has no dedicated dropdown/popover primitive that combines trigger management, content positioning, focus trapping, and responsive behavior. Building a dropdown from <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> or custom <code>&lt;div&gt;</code> toggles requires significant work for accessibility and positioning. <code>auro-dropdown</code> provides a production-ready solution.</p>
+<auro-header level="2" id="accessibility">Accessibility</auro-header>
+<p>Custom dropdown implementations often break keyboard navigation, fail to trap focus, or leave background content interactive when the dropdown is open.</p>
+<p><code>auro-dropdown</code> provides:</p>
+<ul>
+<li><strong>Focus trapping</strong> — In desktop modal mode, Tab and Shift+Tab cycle within the dropdown content. Background content is made inert. The implementation handles focus across shadow DOM boundaries.</li>
+<li><strong>Native dialog semantics</strong> — On mobile, the dropdown opens via <code>showModal()</code>, which provides browser-native focus trapping and background inert behavior.</li>
+<li><strong>ARIA attributes</strong> — The trigger carries <code>aria-expanded</code>, <code>aria-controls</code>, and a configurable <code>role</code> (default: <code>button</code>). The dropdown bib has an accessible dialog label.</li>
+<li><strong>Focus delegation</strong> — <code>delegatesFocus: true</code> ensures clicks on the trigger container route focus to the correct interactive element.</li>
+<li><strong>Escape to close</strong> — The dialog's cancel event is handled to close the dropdown on Escape.</li>
+</ul>
+<auro-header level="2" id="positioning">Positioning</auro-header>
+<p>Positioning a dropdown relative to its trigger — accounting for viewport edges, scroll containers, and dynamic content — is a complex problem that native HTML does not solve.</p>
+<p><code>auro-dropdown</code> integrates Floating UI with:</p>
+<ul>
+<li>Configurable <code>placement</code> (12 positions: top/bottom/left/right with start/center/end)</li>
+<li><code>offset</code> control for gap between trigger and content</li>
+<li><code>noFlip</code> to prevent automatic repositioning</li>
+<li><code>shift</code> to slide the dropdown along the edge to avoid clipping</li>
+<li><code>autoPlacement</code> to let the library choose the best position</li>
+<li><code>matchWidth</code> to size the dropdown to the trigger width</li>
+<li>Layout containment escape so the dropdown is not clipped by ancestor <code>overflow</code> or <code>&lt;dialog&gt;</code> elements</li>
+</ul>
+<auro-header level="2" id="responsiveBehavior">Responsive behavior</auro-header>
+<p>Native disclosure elements have no concept of viewport-aware presentation.</p>
+<p><code>auro-dropdown</code> adapts to the viewport:</p>
+<ul>
+<li><strong>Desktop</strong> — Content appears as a positioned panel with optional modal behavior</li>
+<li><strong>Mobile</strong> — Content opens as a fullscreen dialog below a configurable breakpoint (<code>fullscreenBreakpoint</code>: xs, sm, md, lg, xl, or disabled)</li>
+<li><strong>Desktop modal</strong> — <code>desktopModal</code> makes background siblings inert, traps focus within the dropdown, and prevents interaction with page content — all without going fullscreen</li>
+</ul>
+<auro-header level="2" id="contentagnostic">Content-agnostic</auro-header>
+<p>Unlike <code>&lt;select&gt;</code>, which only accepts <code>&lt;option&gt;</code> elements, <code>auro-dropdown</code> accepts any HTML content in its default slot. This makes it the foundation for composed components like <code>auro-select</code>, <code>auro-combobox</code>, and <code>auro-counter-group</code>.</p>
+<auro-header level="2" id="triggerFlexibility">Trigger flexibility</auro-header>
+<p>The <code>trigger</code> slot accepts any content — plain text, buttons, inputs, or complex custom elements. The component detects whether the trigger content is focusable and adjusts tabindex and ARIA attributes accordingly.</p>
+<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
+<p><code>auro-dropdown</code> is built with the Auro Design System:</p>
+<ul>
+<li>Three layout options: classic, emphasized, snowflake</li>
+<li>Light and dark theme support (<code>appearance</code>)</li>
+<li>Chevron indicator for expand/collapse state</li>
+<li>CSS <code>::part()</code> selectors (<code>trigger</code>, <code>chevron</code>, <code>size</code>, <code>helpText</code>)</li>
+<li>Help text slot with error message support</li>
+</ul>
+<auro-header level="2" id="summary">Summary</auro-header>
+<table>
+<thead>
+<tr>
+<th>Capability</th>
+<th><code>&lt;details&gt;</code> / custom div</th>
+<th><code>auro-dropdown</code></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Viewport-aware positioning</td>
+<td>No</td>
+<td>Floating UI with flip/shift/auto</td>
+</tr>
+<tr>
+<td>Focus trapping</td>
+<td>No</td>
+<td>Desktop modal + fullscreen dialog</td>
+</tr>
+<tr>
+<td>Background inert</td>
+<td>No</td>
+<td>Automatic in modal modes</td>
+</tr>
+<tr>
+<td>Keyboard close (Escape)</td>
+<td>No</td>
+<td>Built-in</td>
+</tr>
+<tr>
+<td>Mobile fullscreen</td>
+<td>No</td>
+<td>Automatic at breakpoint</td>
+</tr>
+<tr>
+<td>Any HTML content</td>
+<td>Yes</td>
+<td>Yes</td>
+</tr>
+<tr>
+<td>Trigger detection</td>
+<td>No</td>
+<td>Auto-detects focusable content</td>
+</tr>
+<tr>
+<td>Theming</td>
+<td>No</td>
+<td>Three layouts + appearance modes</td>
+</tr>
+</tbody>
+</table>

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

@@ -427,7 +427,9 @@ export class AuroDropdown extends AuroElement {
     private _setPageInert;
     _inertSiblings: any[] | undefined;
     /**
-     * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+     * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+     * Preserves the previous inert state so externally-inerted elements are
+     * not inadvertently re-enabled.
      * @private
      */
     private _clearPageInert;

package/components/dropdown/dist/index.js

@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -4871,9 +4871,9 @@ class AuroDropdown extends AuroElement {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4881,13 +4881,15 @@ class AuroDropdown extends AuroElement {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }

package/components/dropdown/dist/registered.js

@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -4871,9 +4871,9 @@ class AuroDropdown extends AuroElement {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4881,13 +4881,15 @@ class AuroDropdown extends AuroElement {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }