@aurodesignsystem-dev/auro-formkit 0.0.0-pr1628.1 → 0.0.0-pr1628.3

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

@@ -1164,7 +1164,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202611081756';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1229,7 +1229,7 @@ const keyboardStrategy = {
  * @csspart controlPlus - The plus button, which raises the value by 1.
  * @csspart helpText - The paragraph that shows the help text, or the error message while the counter is invalid.
  *
- * @event input - Notifies that the counter's value has changed.
+ * @event input - Fires whenever `value` changes, including when the counter sets its starting value, with the new number in `event.detail.value`. It doesn't currently bubble, so listen on the counter itself.
  */
 class AuroCounter extends i$2 {
 
@@ -1350,7 +1350,7 @@ class AuroCounter extends i$2 {
       },
 
       /**
-       * The trimmed text of the default slot, which `auro-counter-group` shows in its dropdown summary.
+       * Holds the trimmed text of the default slot, which `auro-counter-group` shows in its dropdown summary.
        * @private
        */
       defaultSlot: {
@@ -1388,7 +1388,7 @@ class AuroCounter extends i$2 {
       },
 
       /**
-       * Sets a custom error message, such as "Select at least one adult", and marks the counter invalid. The message replaces the help text. Set it with the `error` attribute: setting only the `error` property doesn't currently mark the counter invalid.
+       * Sets a custom error message, such as "Select at least one adult", and marks the counter invalid. The message replaces the help text. Set the `error` attribute before the counter first renders, or call `validate()` after changing it: setting only the property, or changing the attribute later, doesn't currently update `validity`.
        * @category behavior
        */
       error: {
@@ -5779,7 +5779,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081756';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -8380,7 +8380,7 @@ const counterGroupKeyboardStrategy = {
  * @csspart helpText - The paragraph that shows the help text, or the combined error message while a counter is invalid. Rendered only when `isDropdown` is set.
  *
  * @event auroFormElement-validated - Fires each time the group is validated, with the result in `event.detail.validity` and `event.detail.message`.
- * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`.
+ * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`. It doesn't currently bubble, so listen on the group itself.
  */
 class AuroCounterGroup extends AuroElement {
   constructor() {
@@ -8512,8 +8512,8 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * The current error message to display when the component is invalid.
-       * This is set by validation and isn't available to consumers.
+       * Holds the error message shown while the group is invalid.
+       * Validation sets it, and it isn't available to consumers.
        * @private
        */
       errorMessage: {
@@ -8710,7 +8710,7 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * The current text in the valueText slot.
+       * Holds the text in the `valueText` slot.
        * @category behavior
        * @private
        */
@@ -8782,9 +8782,9 @@ class AuroCounterGroup extends AuroElement {
   };
 
   /**
-   * Synchronously recomputes this.validity/this.errorMessage from the current
-   * validity of the child counters. Extracted from updateValidity() so that
-   * validate() can re-apply this aggregation immediately after the shared
+   * Synchronously recomputes `this.validity` and `this.errorMessage` from the current
+   * validity of the child counters. Extracted from `updateValidity()` so that
+   * `validate()` can re-apply this aggregation immediately after the shared
    * validation engine runs, instead of waiting on a deferred timer.
    * @returns {void}
    * @private
@@ -8869,9 +8869,9 @@ class AuroCounterGroup extends AuroElement {
   }
 
   /**
-   * Configures the dropdown counters by selecting all `auro-counter` elements,
-   * appending them to the `auro-counter-wrapper` element within the shadow DOM,
-   * and setting up keyboard navigation and input event listeners.
+   * Finds the dropdown and the counters slotted into its `auro-counter-wrapper`,
+   * adds `input` and `auroFormElement-validated` listeners to each counter, and
+   * updates `value` and the group's validity. Also sets up the bib template when `isDropdown` is set.
    * @private
    */
   configureDropdownCounters() {
@@ -8903,7 +8903,7 @@ class AuroCounterGroup extends AuroElement {
   }
 
   /**
-   * Sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
+   * Finds the bib template, closes the dropdown when its close button is clicked, and moves focus to the close button when the fullscreen dropdown opens.
    * @private
    */
   configureBibtemplate() {

package/components/counter/dist/auro-counter-group.d.ts

@@ -40,7 +40,7 @@
  * @csspart helpText - The paragraph that shows the help text, or the combined error message while a counter is invalid. Rendered only when `isDropdown` is set.
  *
  * @event auroFormElement-validated - Fires each time the group is validated, with the result in `event.detail.validity` and `event.detail.message`.
- * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`.
+ * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`. It doesn't currently bubble, so listen on the group itself.
  */
 export class AuroCounterGroup extends AuroElement {
     static get styles(): import("lit").CSSResult[];
@@ -65,8 +65,8 @@ export class AuroCounterGroup extends AuroElement {
             reflect: boolean;
         };
         /**
-         * The current error message to display when the component is invalid.
-         * This is set by validation and isn't available to consumers.
+         * Holds the error message shown while the group is invalid.
+         * Validation sets it, and it isn't available to consumers.
          * @private
          */
         errorMessage: {
@@ -207,7 +207,7 @@ export class AuroCounterGroup extends AuroElement {
         };
         value: Record<string, number>;
         /**
-         * The current text in the valueText slot.
+         * Holds the text in the `valueText` slot.
          * @category behavior
          * @private
          */
@@ -327,9 +327,9 @@ export class AuroCounterGroup extends AuroElement {
      */
     private getErrorMessages;
     /**
-     * Synchronously recomputes this.validity/this.errorMessage from the current
-     * validity of the child counters. Extracted from updateValidity() so that
-     * validate() can re-apply this aggregation immediately after the shared
+     * Synchronously recomputes `this.validity` and `this.errorMessage` from the current
+     * validity of the child counters. Extracted from `updateValidity()` so that
+     * `validate()` can re-apply this aggregation immediately after the shared
      * validation engine runs, instead of waiting on a deferred timer.
      * @returns {void}
      * @private
@@ -347,14 +347,14 @@ export class AuroCounterGroup extends AuroElement {
      */
     showBib(): void;
     /**
-     * Configures the dropdown counters by selecting all `auro-counter` elements,
-     * appending them to the `auro-counter-wrapper` element within the shadow DOM,
-     * and setting up keyboard navigation and input event listeners.
+     * Finds the dropdown and the counters slotted into its `auro-counter-wrapper`,
+     * adds `input` and `auroFormElement-validated` listeners to each counter, and
+     * updates `value` and the group's validity. Also sets up the bib template when `isDropdown` is set.
      * @private
      */
     private configureDropdownCounters;
     /**
-     * Sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
+     * Finds the bib template, closes the dropdown when its close button is clicked, and moves focus to the close button when the fullscreen dropdown opens.
      * @private
      */
     private configureBibtemplate;

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

@@ -31,7 +31,7 @@
  * @csspart controlPlus - The plus button, which raises the value by 1.
  * @csspart helpText - The paragraph that shows the help text, or the error message while the counter is invalid.
  *
- * @event input - Notifies that the counter's value has changed.
+ * @event input - Fires whenever `value` changes, including when the counter sets its starting value, with the new number in `event.detail.value`. It doesn't currently bubble, so listen on the counter itself.
  */
 export class AuroCounter extends LitElement {
     /**

package/components/counter/dist/index.js

@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202611081756';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1179,7 +1179,7 @@ const keyboardStrategy = {
  * @csspart controlPlus - The plus button, which raises the value by 1.
  * @csspart helpText - The paragraph that shows the help text, or the error message while the counter is invalid.
  *
- * @event input - Notifies that the counter's value has changed.
+ * @event input - Fires whenever `value` changes, including when the counter sets its starting value, with the new number in `event.detail.value`. It doesn't currently bubble, so listen on the counter itself.
  */
 class AuroCounter extends LitElement {
 
@@ -1300,7 +1300,7 @@ class AuroCounter extends LitElement {
       },
 
       /**
-       * The trimmed text of the default slot, which `auro-counter-group` shows in its dropdown summary.
+       * Holds the trimmed text of the default slot, which `auro-counter-group` shows in its dropdown summary.
        * @private
        */
       defaultSlot: {
@@ -1338,7 +1338,7 @@ class AuroCounter extends LitElement {
       },
 
       /**
-       * Sets a custom error message, such as "Select at least one adult", and marks the counter invalid. The message replaces the help text. Set it with the `error` attribute: setting only the `error` property doesn't currently mark the counter invalid.
+       * Sets a custom error message, such as "Select at least one adult", and marks the counter invalid. The message replaces the help text. Set the `error` attribute before the counter first renders, or call `validate()` after changing it: setting only the property, or changing the attribute later, doesn't currently update `validity`.
        * @category behavior
        */
       error: {
@@ -5711,7 +5711,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202611081756';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -8312,7 +8312,7 @@ const counterGroupKeyboardStrategy = {
  * @csspart helpText - The paragraph that shows the help text, or the combined error message while a counter is invalid. Rendered only when `isDropdown` is set.
  *
  * @event auroFormElement-validated - Fires each time the group is validated, with the result in `event.detail.validity` and `event.detail.message`.
- * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`.
+ * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`. It doesn't currently bubble, so listen on the group itself.
  */
 class AuroCounterGroup extends AuroElement {
   constructor() {
@@ -8444,8 +8444,8 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * The current error message to display when the component is invalid.
-       * This is set by validation and isn't available to consumers.
+       * Holds the error message shown while the group is invalid.
+       * Validation sets it, and it isn't available to consumers.
        * @private
        */
       errorMessage: {
@@ -8642,7 +8642,7 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * The current text in the valueText slot.
+       * Holds the text in the `valueText` slot.
        * @category behavior
        * @private
        */
@@ -8714,9 +8714,9 @@ class AuroCounterGroup extends AuroElement {
   };
 
   /**
-   * Synchronously recomputes this.validity/this.errorMessage from the current
-   * validity of the child counters. Extracted from updateValidity() so that
-   * validate() can re-apply this aggregation immediately after the shared
+   * Synchronously recomputes `this.validity` and `this.errorMessage` from the current
+   * validity of the child counters. Extracted from `updateValidity()` so that
+   * `validate()` can re-apply this aggregation immediately after the shared
    * validation engine runs, instead of waiting on a deferred timer.
    * @returns {void}
    * @private
@@ -8801,9 +8801,9 @@ class AuroCounterGroup extends AuroElement {
   }
 
   /**
-   * Configures the dropdown counters by selecting all `auro-counter` elements,
-   * appending them to the `auro-counter-wrapper` element within the shadow DOM,
-   * and setting up keyboard navigation and input event listeners.
+   * Finds the dropdown and the counters slotted into its `auro-counter-wrapper`,
+   * adds `input` and `auroFormElement-validated` listeners to each counter, and
+   * updates `value` and the group's validity. Also sets up the bib template when `isDropdown` is set.
    * @private
    */
   configureDropdownCounters() {
@@ -8835,7 +8835,7 @@ class AuroCounterGroup extends AuroElement {
   }
 
   /**
-   * Sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
+   * Finds the bib template, closes the dropdown when its close button is clicked, and moves focus to the close button when the fullscreen dropdown opens.
    * @private
    */
   configureBibtemplate() {

package/components/counter/dist/registered.js

@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202611081756';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1179,7 +1179,7 @@ const keyboardStrategy = {
  * @csspart controlPlus - The plus button, which raises the value by 1.
  * @csspart helpText - The paragraph that shows the help text, or the error message while the counter is invalid.
  *
- * @event input - Notifies that the counter's value has changed.
+ * @event input - Fires whenever `value` changes, including when the counter sets its starting value, with the new number in `event.detail.value`. It doesn't currently bubble, so listen on the counter itself.
  */
 class AuroCounter extends LitElement {
 
@@ -1300,7 +1300,7 @@ class AuroCounter extends LitElement {
       },
 
       /**
-       * The trimmed text of the default slot, which `auro-counter-group` shows in its dropdown summary.
+       * Holds the trimmed text of the default slot, which `auro-counter-group` shows in its dropdown summary.
        * @private
        */
       defaultSlot: {
@@ -1338,7 +1338,7 @@ class AuroCounter extends LitElement {
       },
 
       /**
-       * Sets a custom error message, such as "Select at least one adult", and marks the counter invalid. The message replaces the help text. Set it with the `error` attribute: setting only the `error` property doesn't currently mark the counter invalid.
+       * Sets a custom error message, such as "Select at least one adult", and marks the counter invalid. The message replaces the help text. Set the `error` attribute before the counter first renders, or call `validate()` after changing it: setting only the property, or changing the attribute later, doesn't currently update `validity`.
        * @category behavior
        */
       error: {
@@ -5711,7 +5711,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202611081756';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -8312,7 +8312,7 @@ const counterGroupKeyboardStrategy = {
  * @csspart helpText - The paragraph that shows the help text, or the combined error message while a counter is invalid. Rendered only when `isDropdown` is set.
  *
  * @event auroFormElement-validated - Fires each time the group is validated, with the result in `event.detail.validity` and `event.detail.message`.
- * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`.
+ * @event input - Fires when any counter's value changes, with the new `total` and `value` in `event.detail`. It doesn't currently bubble, so listen on the group itself.
  */
 class AuroCounterGroup extends AuroElement {
   constructor() {
@@ -8444,8 +8444,8 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * The current error message to display when the component is invalid.
-       * This is set by validation and isn't available to consumers.
+       * Holds the error message shown while the group is invalid.
+       * Validation sets it, and it isn't available to consumers.
        * @private
        */
       errorMessage: {
@@ -8642,7 +8642,7 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * The current text in the valueText slot.
+       * Holds the text in the `valueText` slot.
        * @category behavior
        * @private
        */
@@ -8714,9 +8714,9 @@ class AuroCounterGroup extends AuroElement {
   };
 
   /**
-   * Synchronously recomputes this.validity/this.errorMessage from the current
-   * validity of the child counters. Extracted from updateValidity() so that
-   * validate() can re-apply this aggregation immediately after the shared
+   * Synchronously recomputes `this.validity` and `this.errorMessage` from the current
+   * validity of the child counters. Extracted from `updateValidity()` so that
+   * `validate()` can re-apply this aggregation immediately after the shared
    * validation engine runs, instead of waiting on a deferred timer.
    * @returns {void}
    * @private
@@ -8801,9 +8801,9 @@ class AuroCounterGroup extends AuroElement {
   }
 
   /**
-   * Configures the dropdown counters by selecting all `auro-counter` elements,
-   * appending them to the `auro-counter-wrapper` element within the shadow DOM,
-   * and setting up keyboard navigation and input event listeners.
+   * Finds the dropdown and the counters slotted into its `auro-counter-wrapper`,
+   * adds `input` and `auroFormElement-validated` listeners to each counter, and
+   * updates `value` and the group's validity. Also sets up the bib template when `isDropdown` is set.
    * @private
    */
   configureDropdownCounters() {
@@ -8835,7 +8835,7 @@ class AuroCounterGroup extends AuroElement {
   }
 
   /**
-   * Sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
+   * Finds the bib template, closes the dropdown when its close button is clicked, and moves focus to the close button when the fullscreen dropdown opens.
    * @private
    */
   configureBibtemplate() {

package/components/datepicker/demo/accessibility.md

@@ -13,7 +13,7 @@ The trigger contains one or two `<auro-input>` elements (depending on whether `r
 | Attribute | Value | Description |
 |---|---|---|
 | `<label for>` | slot text | The input gets its accessible name from a `<label>` that holds the `fromLabel` or `toLabel` slot content. |
-| `aria-invalid` | `true` / `false` | Reflects whether the current value fails validation. |
+| `aria-invalid` | `true` / `false` | Set to `true` when the value fails validation and `false` when it passes. It's also `true` before the datepicker is first validated, so screen readers can announce a new, empty datepicker as invalid. |
 
 <auro-header level="3" id="clearButton">Clear button</auro-header>
 The clear button (shown when the input has a value) exposes:
@@ -31,7 +31,7 @@ The calendar uses the WAI-ARIA grid pattern for screen reader navigation:
 
 | Attribute | Applied to | Description |
 |---|---|---|
-| `role="grid"` | Calendar table | Identifies the calendar as a grid. The month heading is rendered as visible text adjacent to the grid but is excluded from the accessibility tree (announcements are handled via the live region described below). |
+| `role="grid"` | Calendar table | Identifies each month's days as a grid. The month heading above the grid is visible text that screen readers can reach, but it isn't linked to the grid as its name. The live region described below announces month changes. |
 | `role="rowgroup"` | Body group | Groups the week rows. |
 | `role="row"` | Week row | Groups each week of date cells. |
 | `role="columnheader"` | Day-of-week header | Each weekday cell in the header row exposes the abbreviated day name as visible text and the full localized day name via `aria-label`, for example `aria-label="Sunday"`. |
@@ -62,7 +62,7 @@ When the calendar bib opens, focus moves to the calendar grid wrapper (`#calenda
 <auro-header level="2" id="screenReaderAnnouncements">Screen reader announcements</auro-header>
 - **Date selection**: When a date is selected, the calendar's live region (`aria-live="assertive"`) announces the formatted date followed by "selected", for example "Wednesday, January 15, 2025, selected". For range datepickers, both the start and end date selections are announced, with the `rangeLabelStart` or `rangeLabelEnd` text.
 - **Debounced navigation announcement**: During arrow-key navigation, a debounced live region (150 ms) announces the full date context (date, slot content, range position, availability) after the user pauses. This prevents overlapping announcements during rapid navigation.
-- **Date cell labels**: Each date cell has an `aria-label` on the host element with the full localized label, including any date slot content, such as a price. VoiceOver reads this content instead of `aria-label`, which iOS VoiceOver does not reliably announce on buttons.
+- **Date cell labels**: Each date cell has an `aria-label` on the host element with the full localized label, including any date slot content, such as a price. The cell's button content is hidden from screen readers, so the date isn't read twice.
 - **Validation errors**: When a validation error occurs, the error message is rendered with `role="alert"` and `aria-live="assertive"`, causing it to be announced immediately without requiring focus.
 - **Help text**: The help text isn't currently linked to the inputs with `aria-describedby`, so screen readers don't announce it when an input gets focus.
 

package/components/datepicker/demo/api.md

@@ -10,7 +10,7 @@ A date field that lets people type a date or choose it from a calendar, includin
 - **Limits and unavailable dates**: `minDate` and `maxDate` turn off dates outside a range, and `blackoutDates` marks single dates people can't select.
 - **Validation**: `required` shows an error when no date is chosen, and the `setCustomValidity` attributes replace the built-in error messages.
 - **Content on dates**: The `date_YYYY_MM_DD` and `popover_YYYY_MM_DD` slots add content to a date in the calendar, such as a price.
-- **Localization**: `locale` sets the date format and the month and weekday names, and attributes and slots let you translate every other label.
+- **Localization**: `locale` sets the date format and the month and weekday names, and attributes and slots let you translate most other text, except the calendar's Done button and the word "selected" in screen reader announcements.
 - **Fullscreen on small screens**: `fullscreenBreakpoint` sets the screen size at or below which the calendar opens fullscreen.
 
 **Example**
@@ -38,9 +38,9 @@ A date field that lets people type a date or choose it from a calendar, includin
 | placeholderEndDate              | placeholderenddate              |           | string                                                                                                                                                             |                              | ui       | `range`       | Sets the hint text shown in the end date input of a range when it's empty. When not set, the end date input uses `placeholder`.                                                                                                                                                                                                                                                             |
 | placement                       | placement                       |           | `top` \| `right` \| `bottom` \| `left` \| `bottom-start` \| `top-start` \| `top-end` \| `right-start` \| `right-end` \| `bottom-end` \| `left-start` \| `left-end` | `bottom-start`               | ui       |               | Sets where the calendar dropdown opens relative to the input, such as `bottom-start` (below the input, lined up with its start edge). The dropdown still flips to the opposite side when it doesn't fit, unless `noFlip` is set.                                                                                                                                                            |
 | referenceDates                  | referencedates                  |           | string[]                                                                                                                                                           |                              | ui       |               | Sets dates to mark in the calendar for comparison, such as the dates of an earlier trip, as an array of ISO date strings (`YYYY-MM-DD`). Marked dates get an outline. Add `popover_YYYY_MM_DD` content to explain why each date is marked.                                                                                                                                                  |
-| shape                           | shape                           |           | `box` \| `classic` \| `pill` \| `pill-left` \| `pill-right` \| `rounded` \| `snowflake`                                                                            | `classic`                    | ui       |               | Sets the shape of the datepicker.                                                                                                                                                                                                                                                                                                                                                           |
+| shape                           | shape                           |           | `box` \| `classic` \| `pill` \| `pill-left` \| `pill-right` \| `rounded` \| `snowflake`                                                                            | `classic`                    | ui       |               | Sets the shape of the date field. Use `classic` (the default) with the `classic` layout, and `snowflake` with the `snowflake` layout.                                                                                                                                                                                                                                                       |
 | shift                           | shift                           |           | boolean                                                                                                                                                            | `false`                      | ui       |               | Moves the calendar dropdown along the input's edge so the edge of the screen doesn't cut it off.                                                                                                                                                                                                                                                                                            |
-| size                            | size                            |           | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                                                                                                               | `lg`                         | ui       |               | Sets the size of the datepicker.                                                                                                                                                                                                                                                                                                                                                            |
+| size                            | size                            |           | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                                                                                                               | `lg`                         | ui       |               | Sets the height of the date field, from `xs`, the shortest, to `xl`, the tallest. The `classic` and `snowflake` shapes have a fixed height, so `size` doesn't change them. The `rounded` shape supports only `lg`, and the `pill`, `pill-left`, and `pill-right` shapes support only `md` and `xl`.                                                                                         |
 | stacked                         | stacked                         |           | boolean                                                                                                                                                            | `false`                      | ui       |               | Doesn't currently change the datepicker's appearance or behavior.                                                                                                                                                                                                                                                                                                                           |
 | autoPlacement                   | autoplacement                   |           | boolean                                                                                                                                                            | `false`                      | ui       |               | Deprecated: Use `placement` instead.<br>Places the calendar dropdown on whichever side of the input has the most space. The dropdown already flips to the opposite side when it doesn't fit, unless `noFlip` is set.                                                                                                                                                                        |
 | onDark                          | ondark                          |           | boolean                                                                                                                                                            | `false`                      | ui       |               | Deprecated: Use `appearance="inverse"` instead.<br>Switches the datepicker to colors designed for dark backgrounds.                                                                                                                                                                                                                                                                         |

package/components/datepicker/demo/customize.md

@@ -121,17 +121,17 @@
 </tr>
 </thead>
 <tbody>
-<tr><td><code>dropdown</code></td><td>The outer dropdown container.</td></tr>
-<tr><td><code>trigger</code></td><td>The trigger content container.</td></tr>
+<tr><td><code>dropdown</code></td><td>The dropdown that holds the trigger, the calendar, and the help text.</td></tr>
+<tr><td><code>trigger</code></td><td>The <code>&lt;div&gt;</code> in the dropdown's trigger that holds the calendar icon, the inputs, and the clear button or error icon.</td></tr>
 <tr><td><code>wrapper</code></td><td>The container inside <code>trigger</code> that lays out the calendar icon, the inputs, and the clear button or error icon.</td></tr>
 <tr><td><code>mainLabel</code></td><td>The label for the whole datepicker, rendered only when <code>layout="snowflake"</code>.</td></tr>
 <tr><td><code>inputSection</code></td><td>The container that holds the date inputs.</td></tr>
 <tr><td><code>accentIcon</code></td><td>The calendar icon shown before the inputs in the <code>snowflake</code> layout. The <code>classic</code> layout hides it and shows the start date input's own calendar icon instead.</td></tr>
-<tr><td><code>input</code></td><td>The date input element(s).</td></tr>
+<tr><td><code>input</code></td><td>Each date input: one, or two when <code>range</code> is set.</td></tr>
 <tr><td><code>calendarWrapper</code></td><td>The container in the dropdown that holds the calendar.</td></tr>
-<tr><td><code>calendar</code></td><td>The calendar element.</td></tr>
-<tr><td><code>helpTextSpan</code></td><td>The help text container wrapper.</td></tr>
-<tr><td><code>helpText</code></td><td>The help text element.</td></tr>
+<tr><td><code>calendar</code></td><td>The calendar in the dropdown, with the month grids, the previous and next month buttons, and the Done button.</td></tr>
+<tr><td><code>helpTextSpan</code></td><td>The <code>&lt;div&gt;</code> that holds the help text or error message.</td></tr>
+<tr><td><code>helpText</code></td><td>The <code>&lt;p&gt;</code> inside <code>helpTextSpan</code> that holds the help text or error message.</td></tr>
 </tbody>
 </table>
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -268,10 +268,10 @@
 <auro-header level="3" id="localization">Localization</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/localization.md) -->
 <!-- The below content is automatically added from ./../docs/partials/customize/localization.md -->
-<p>The component supports complete localization, including visible strings, screen reader announcements, and locale-based date formatting.</p>
+<p>The component supports localization of the date format, the calendar's month and weekday names, and most visible strings and screen reader announcements. A few strings don't currently have a slot or attribute, such as the calendar's Done button and the word "selected" in date selection announcements, so they're always in English.</p>
 <auro-header level="4" id="localizationTrigger">Trigger</auro-header>
 <auro-header level="5" id="localizationTriggerVisibleStrings">Visible strings</auro-header>
-<p>The visible strings rendered in the input, trigger, and fullscreen calendar aren't derived from <code>locale</code>. They're projected through named slots so each language can supply its own translation. Pass a <code>&lt;span&gt;</code> with the matching <code>slot</code> attribute for every string you need to localize.</p>
+<p>The visible strings rendered in the input, trigger, and fullscreen calendar aren't derived from <code>locale</code>. Most of them are projected through named slots so each language can supply its own translation. Pass a <code>&lt;span&gt;</code> with the matching <code>slot</code> attribute for every string you need to localize.</p>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-visible-strings.html) -->
 <!-- The below content is automatically added from ./../apiExamples/localization-visible-strings.html -->
 <pre class="language-diff"><code class="language-diff">  &lt;auro-datepicker&gt;
@@ -491,7 +491,7 @@
     navLabelNextMonth="Nächster Monat"
     calendarGridLabel="Kalendertage des Monats">
 <span slot="ariaLabel.bib.close">Kalender schließen</span>
-<span slot="fromLabel">Abreisedatum (geerbt aus `data-locale="de-DE"`)</span>
+<span slot="fromLabel">Abreisedatum (geerbt aus <code>data-locale="de-DE"</code>)</span>
 <span slot="toLabel">Rückkehrdatum</span>
 <span slot="helpText">Hilfetext</span>
 <span slot="optionalFromLabel">(freiwillig)</span>
@@ -591,7 +591,7 @@
     navLabelNextMonth="Nächster Monat"
     calendarGridLabel="Kalendertage des Monats"&gt;
     &lt;span slot="ariaLabel.bib.close"&gt;Kalender schließen&lt;/span&gt;
-    &lt;span slot="fromLabel"&gt;Abreisedatum (geerbt aus `data-locale="de-DE"`)&lt;/span&gt;
+    &lt;span slot="fromLabel"&gt;Abreisedatum (geerbt aus &lt;code&gt;data-locale="de-DE"&lt;/code&gt;)&lt;/span&gt;
     &lt;span slot="toLabel"&gt;Rückkehrdatum&lt;/span&gt;
     &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
     &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;