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

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

@@ -1381,7 +1381,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '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.

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

@@ -1381,7 +1381,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '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.

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

@@ -1381,7 +1381,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '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.

package/components/checkbox/dist/index.js

@@ -1334,7 +1334,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '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.

package/components/checkbox/dist/registered.js

@@ -1334,7 +1334,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '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.

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

@@ -5299,7 +5299,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202611081803';
+var formkitVersion$2 = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -19480,7 +19480,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20766,7 +20766,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

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

@@ -5299,7 +5299,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202611081803';
+var formkitVersion$2 = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -19480,7 +19480,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20766,7 +20766,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

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

@@ -5314,7 +5314,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202611081803';
+var formkitVersion$2 = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -19495,7 +19495,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20781,7 +20781,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/index.js

@@ -5232,7 +5232,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202611081803';
+var formkitVersion$2 = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -19406,7 +19406,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20692,7 +20692,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/registered.js

@@ -5232,7 +5232,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202611081803';
+var formkitVersion$2 = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
@@ -19406,7 +19406,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+var formkitVersion$1 = '202611081821';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20692,7 +20692,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

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

@@ -1166,7 +1166,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+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.
@@ -5781,7 +5781,7 @@ class AuroHelpText extends i$1 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.

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

@@ -1164,7 +1164,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+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.
@@ -5779,7 +5779,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.

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

@@ -1164,7 +1164,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+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.
@@ -5779,7 +5779,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.

package/components/counter/dist/index.js

@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+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.
@@ -5711,7 +5711,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.

package/components/counter/dist/registered.js

@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202611081803';
+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.
@@ -5711,7 +5711,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202611081803';
+var formkitVersion = '202611081821';
 
 /**
  * Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.

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;