@aurodesignsystem-dev/auro-formkit 0.0.0-pr1480.9 → 0.0.0-pr1482.0

package/components/datepicker/demo/accessibility.md

@@ -26,80 +26,29 @@ The clear button (shown when the input has a value) exposes:
 - Help text is associated with the component so screen readers can announce contextual guidance.
 - When validation fails, the error message is rendered with `role="alert"` and `aria-live="assertive"` to ensure it is announced immediately.
 
-<auro-header level="3" id="calendarGrid">Calendar Grid</auro-header>
-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. `aria-labelledby` points to the month heading. |
-| `role="rowgroup"` | Header / body groups | Groups the day-of-week header row and the week rows. |
-| `role="row"` | Week row | Groups each week of date cells. |
-| `role="columnheader"` | Day-of-week header | Each day-of-week abbreviation. Rendered as an `<abbr>` element with the full day name in the `title` attribute so screen readers can announce the expanded form. |
-| `role="gridcell"` | In-range date cell, active-descendant proxy | Each selectable date cell. Includes `aria-selected`, `aria-current="date"` (for today), and a visually-hidden text label. A proxy `<span>` inside the calendar grid wrapper mirrors the active cell's ARIA attributes for `aria-activedescendant`. |
-| `role="presentation"` | Out-of-range date cell | Cells outside the valid min/max range. Also receive `aria-hidden="true"` and `tabindex="-1"` to remove them from both the accessibility tree and the tab order. |
-| `aria-disabled="true"` | Blackout date cell | Cells matching the `blackout` dates list. Unlike out-of-range cells, blackout cells **remain focusable** via arrow-key navigation so screen reader users can discover them. The cell's label includes ", unavailable" to communicate that the date cannot be selected. |
-| `aria-selected` | Date cell button | `"true"` for the selected date(s), `"false"` for all other in-range cells. |
-| Accessible name | Date cell button | Provided via visually-hidden text content (not an `aria-label` attribute). Localized label built from `Intl.DateTimeFormat` (weekday, month, day, year), plus any date slot content (e.g. prices), the range position label (e.g., "range start"), and availability status (", unavailable" for blackout dates). |
-
 <auro-header level="2" id="focusManagement">Focus Management</auro-header>
 The component uses `delegatesFocus: true` on its shadow root, meaning focus is automatically delegated to the first focusable element inside the component (the date input).
 
-<auro-header level="3" id="ariaActivedescendant">aria-activedescendant</auro-header>
-The calendar grid uses an **`aria-activedescendant`** pattern for keyboard navigation. DOM focus remains on a wrapper element (`#calendarGrid`) while `aria-activedescendant` points to a proxy `<span>` that mirrors the active cell's ARIA attributes (`aria-label`, `aria-selected`, `aria-current`, `aria-disabled`). This approach keeps the screen reader in sync with the visually active cell without moving DOM focus on every keystroke, which prevents duplicate announcements during rapid arrow-key navigation.
-
-The active cell receives a `.visualFocus` CSS class to display a visible focus ring, since the native `:focus-visible` pseudo-class applies to the grid wrapper (which holds actual DOM focus), not to individual cells.
-
-The initial active cell is determined in priority order:
-
-1. The currently selected date (if within the valid range).
-2. Today's date (if enabled).
-3. The first future enabled date.
-4. The first past enabled date.
-
-<auro-header level="3" id="focusOnOpen">Focus on Open</auro-header>
-When the calendar bib opens, focus moves to the calendar grid wrapper (`#calendarGrid`). The `aria-activedescendant` attribute points to a proxy element that carries the active date cell's label, so screen readers announce the active date. This applies to both desktop and fullscreen modes.
+When the calendar bib opens on small viewports as a fullscreen modal dialog, focus is moved to the dialog's close button, giving screen reader users an immediate action to dismiss it.
 
 <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 (e.g., "Wednesday, January 15, 2025"). For range datepickers, both the start and end date selections are announced.
-- **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 contains a visually-hidden `<span class="srOnly">` with the full localized label, including any date slot content (e.g. prices). VoiceOver reads this content instead of `aria-label`, which iOS VoiceOver does not reliably announce on buttons.
 - **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 content is associated with the input so that screen readers announce it as part of the element description when focused.
 
 <auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
-- The `fromLabel` slot content is used as the accessible name for the first date input. It is also forwarded to the dropdown bib as the dialog's accessible name (`aria-labelledby`).
+- The `fromLabel` slot content is used as the accessible name for the first date input.
 - When `range` is set, the `toLabel` slot content provides the accessible name for the second date input.
 - The `label` slot is used as the main label when `layout="snowflake"`.
-- The `ariaLabel.bib.close` slot customizes the close button label in fullscreen mode (defaults to "Close").
-- The `ariaLabel.input.clear` slot customizes the clear button label (falls back to a localized default).
 - A label is required. Without it, assistive technology users will not have context for what the datepicker controls.
 
-<auro-header level="3" id="rangeLabels">Configurable Range Labels</auro-header>
-When `range` is set, each date cell's label includes its position relative to the selected range. These labels are configurable via attributes for localization:
-
-| Attribute | Default | Description |
-|---|---|---|
-| `rangeLabelStart` | "range start" | Announced for the range start date. |
-| `rangeLabelEnd` | "range end" | Announced for the range end date. |
-| `rangeLabelBeforeRange` | "before range" | Announced for dates before the range start. |
-| `rangeLabelInRange` | "in range" | Announced for dates within the selected range. |
-| `rangeLabelAfterRange` | "after range" | Announced for dates after the range (or after start when no end is selected). |
-
 <auro-header level="2" id="fullscreenBehavior">Fullscreen (Modal) Behavior</auro-header>
 On smaller viewports, the calendar bib opens as a fullscreen modal dialog:
 
 - The dialog is opened with `showModal()`, which provides **native focus trapping** — only elements inside the dialog are reachable via Tab.
 - Content outside the dialog is automatically made **inert** by the browser, preventing interaction with the page behind it.
-- The trigger input is set to `inert` while the fullscreen dialog is open, preventing VoiceOver from reaching it behind the dialog.
+- A close button inside the dialog is focused when the modal opens, giving screen reader users an immediate action to dismiss it.
 - Touch scrolling on the page behind the dialog is blocked to prevent the background from scrolling into view.
 
-<auro-header level="2" id="desktopModalBehavior">Desktop Modal Behavior</auro-header>
-On larger viewports, the datepicker opens as a popover with modal-like focus management:
-
-- Sibling elements of the dropdown host are set to `inert`, preventing interaction with the rest of the page while the calendar is open.
-- Tab and Shift+Tab are trapped within the bib content, wrapping focus between the first and last focusable elements.
-- Inertness and focus trapping are cleaned up when the bib closes or the component is disconnected.
-
 <auro-header level="2" id="reducedMotion">Reduced Motion</auro-header>
 The component respects the `prefers-reduced-motion` media query. When the user has requested reduced motion, scroll animations use instant scrolling instead of smooth scrolling.
 

package/components/datepicker/demo/api.md

@@ -11,8 +11,6 @@ The `auro-datepicker` component provides users with a way to select a date or da
 |-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
 | `appearance`                      | `appearance`                      |           | `string`                                         | "'default'"                                      | Defines whether the component will be on lighter or darker backgrounds. |
 | `autoPlacement`                   | `autoPlacement`                   |           | `boolean`                                        | "false"                                          | If declared, bib's position will be automatically calculated where to appear. |
-| `blackoutDates`                   | `blackoutDates`                   |           | `array`                                          | []                                               | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
-| `blackoutLabel`                   | `blackoutLabel`                   |           | `string`                                         | "unavailable"                                    | Label announced for blackout (disabled but in-range) date cells. |
 | `calendarEndDate`                 | `calendarEndDate`                 |           | `string`                                         | "undefined"                                      | The last date that may be displayed in the calendar. |
 | `calendarFocusDate`               | `calendarFocusDate`               |           | `string`                                         | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
 | `calendarStartDate`               | `calendarStartDate`               |           | `string`                                         | "undefined"                                      | The first date that may be displayed in the calendar. |
@@ -29,8 +27,6 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | `maxDate`                         | `maxDate`                         |           | `string`                                         |                                                  | Maximum date. All dates after will be disabled.  |
 | `minDate`                         | `minDate`                         |           | `string`                                         |                                                  | Minimum date. All dates before will be disabled. |
 | `monthNames`                      | `monthNames`                      |           | `array`                                          | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
-| `navLabelNextMonth`               | `navLabelNextMonth`               |           | `string`                                         | "Next month"                                     | Accessible label for the next month navigation button. |
-| `navLabelPrevMonth`               | `navLabelPrevMonth`               |           | `string`                                         | "Previous month"                                 | Accessible label for the previous month navigation button. |
 | `noFlip`                          | `noFlip`                          |           | `boolean`                                        | false                                            | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | `noValidate`                      | `noValidate`                      |           | `boolean`                                        | false                                            | If set, disables auto-validation on blur.        |
 | `offset`                          | `offset`                          |           | `number`                                         | "0"                                              | Gap between the trigger element and bib.         |
@@ -39,15 +35,10 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | `placeholderEndDate`              | `placeholderEndDate`              |           | `string`                                         |                                                  | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
 | `placement`                       | `placement`                       |           | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'"                                 | Position where the bib should appear relative to the trigger. |
 | `range`                           | `range`                           |           | `boolean`                                        | false                                            | If set, turns on date range functionality in auro-calendar. |
-| `rangeLabelAfterRange`            | `rangeLabelAfterRange`            |           | `string`                                         | "after range"                                    | Label announced for cells after the range (or after start when no end is selected). |
-| `rangeLabelBeforeRange`           | `rangeLabelBeforeRange`           |           | `string`                                         | "before range"                                   | Label announced for cells before the range start. |
-| `rangeLabelEnd`                   | `rangeLabelEnd`                   |           | `string`                                         | "range end"                                      | Label announced for the range end date cell.     |
-| `rangeLabelInRange`               | `rangeLabelInRange`               |           | `string`                                         | "in range"                                       | Label announced for cells within the selected range. |
-| `rangeLabelStart`                 | `rangeLabelStart`                 |           | `string`                                         | "range start"                                    | Label announced for the range start date cell.   |
 | `referenceDates`                  | `referenceDates`                  |           | `array`                                          |                                                  | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of dates in the format of `MM/DD/YYYY`. |
 | `required`                        | `required`                        |           | `boolean`                                        | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
 | `setCustomValidity`               | `setCustomValidity`               |           | `string`                                         |                                                  | Sets a custom help text message to display for all validityStates. |
-| `setCustomValidityCustomError`    | `setCustomValidityCustomError`    |           | `string`                                         |                                                  | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
+| `setCustomValidityCustomError`    | `setCustomValidityCustomError`    |           | `string`                                         |                                                  | Custom help text message to display when validity = `customError`. |
 | `setCustomValidityRangeOverflow`  | `setCustomValidityRangeOverflow`  |           | `string`                                         |                                                  | Custom help text message to display when validity = `rangeOverflow`. |
 | `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` |           | `string`                                         |                                                  | Custom help text message to display when validity = `rangeUnderflow`. |
 | `setCustomValidityValueMissing`   | `setCustomValidityValueMissing`   |           | `string`                                         |                                                  | Custom help text message to display when validity = `valueMissing`. |
@@ -83,7 +74,7 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | `auroDatePicker-newSlotContent` | `CustomEvent<any>`                               | Notifies that new slot content has been added to the datepicker. |
 | `auroDatePicker-toggled`        | `CustomEvent<{ expanded: any; }>`                | Notifies that the calendar dropdown has been opened/closed. |
 | `auroDatePicker-valueSet`       |                                                  | Notifies that the component has a new value set. |
-| `auroFormElement-validated`     | `CustomEvent<{ validity: any; message: any; }>`  | Notifies that the component value(s) have been validated. |
+| `auroFormElement-validated`     |                                                  | Notifies that the component value(s) have been validated. |
 | `input`                         |                                                  |                                                  |
 
 ## Slots

package/components/datepicker/demo/customize.html

@@ -44,8 +44,6 @@
     <script type="module">
       import { renderPage } from './demo-support.min.js';
       await renderPage('./customize.md');
-      import { initExamples } from "./customize.min.js";
-      initExamples();
     </script>
 
     <!-- Component scripts -->

package/components/datepicker/demo/customize.md

@@ -695,70 +695,13 @@
 </auro-accordion>
 <auro-header level="3" id="localization">Localization</auro-header>
 <p>Use the <code>centralDate</code>, locale, and related attributes to configure the datepicker for different regions and languages.</p>
-<auro-header level="4" id="rangeLabels">Screen Reader Labels</auro-header>
-<p>The following attributes customize the labels announced by screen readers when navigating the calendar. Range labels apply when the <code>range</code> attribute is set; navigation labels apply to all configurations.</p>
-<auro-table>
-<table>
-<thead>
-<tr>
-<th>Attribute</th>
-<th>Default</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>rangeLabelStart</code></td>
-<td>"range start"</td>
-<td>Announced on the departure/start date cell.</td>
-</tr>
-<tr>
-<td><code>rangeLabelEnd</code></td>
-<td>"range end"</td>
-<td>Announced on the return/end date cell.</td>
-</tr>
-<tr>
-<td><code>rangeLabelBeforeRange</code></td>
-<td>"before range"</td>
-<td>Announced on cells before the start date.</td>
-</tr>
-<tr>
-<td><code>rangeLabelInRange</code></td>
-<td>"in range"</td>
-<td>Announced on cells between the start and end dates.</td>
-</tr>
-<tr>
-<td><code>rangeLabelAfterRange</code></td>
-<td>"after range"</td>
-<td>Announced on cells after the end date (or after start when no end is selected).</td>
-</tr>
-<tr>
-<td><code>navLabelPrevMonth</code></td>
-<td>"Previous month"</td>
-<td>Accessible label for the previous month navigation button.</td>
-</tr>
-<tr>
-<td><code>navLabelNextMonth</code></td>
-<td>"Next month"</td>
-<td>Accessible label for the next month navigation button.</td>
-</tr>
-</tbody>
-</table>
-</auro-table>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
 <!-- The below content is automatically added from ./../apiExamples/localization.html -->
-<auro-datepicker range
-  rangeLabelStart="fecha de salida"
-  rangeLabelEnd="fecha de regreso"
-  rangeLabelBeforeRange="antes de la salida"
-  rangeLabelInRange="entre vuelos"
-  rangeLabelAfterRange="después del regreso"
-  navLabelPrevMonth="Ir al mes anterior"
-  navLabelNextMonth="Ir al mes siguiente"
-  id="localizationExample">
-<span slot="fromLabel">Salida</span>
-<span slot="toLabel">Regreso</span>
+<auro-datepicker format="yyyy/mm/dd" id="localizationExample">
+<span slot="bib.fullscreen.headline">Localization Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
 </auro-datepicker>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -767,17 +710,10 @@
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-datepicker range
-  rangeLabelStart="fecha de salida"
-  rangeLabelEnd="fecha de regreso"
-  rangeLabelBeforeRange="antes de la salida"
-  rangeLabelInRange="entre vuelos"
-  rangeLabelAfterRange="después del regreso"
-  navLabelPrevMonth="Ir al mes anterior"
-  navLabelNextMonth="Ir al mes siguiente"
-  id="localizationExample"&gt;
-  &lt;span slot="fromLabel"&gt;Salida&lt;/span&gt;
-  &lt;span slot="toLabel"&gt;Regreso&lt;/span&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker format="yyyy/mm/dd" id="localizationExample"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Localization Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
 &lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/components/datepicker/demo/design.md

@@ -35,13 +35,11 @@
 </li>
 </ul>
 <auro-header level="4" id="calendar">Calendar</auro-header>
-<p>The calendar displays one or more months in a grid layout. Users interact with the calendar by clicking, tapping, or using arrow keys to navigate date cells and Enter/Space to select. The calendar supports:</p>
+<p>The calendar displays one or more months in a grid layout. Users interact with the calendar by clicking on individual date cells. The calendar supports:</p>
 <ul>
 <li>Navigating between months using previous/next arrows.</li>
-<li>Arrow-key navigation between date cells with automatic cross-month boundary handling.</li>
 <li>Date range highlighting when <code>range</code> is set.</li>
 <li>Disabled dates outside the <code>minDate</code>/<code>maxDate</code> bounds.</li>
-<li>Blackout dates that are focusable but not selectable.</li>
 <li>Custom cell content via the <code>date_MM_DD_YYYY</code> slot.</li>
 <li>Cell popovers via the <code>popover_MM_DD_YYYY</code> slot.</li>
 </ul>

package/components/datepicker/demo/index.js

@@ -1,5 +1,4 @@
 import { AuroDatePicker } from '../src/auro-datepicker.js';
-import { blackoutLabelExample } from '../apiExamples/blackout-label.js';
 
 AuroDatePicker.register(); // registering to auro-datepicker
 AuroDatePicker.register('custom-datepicker');
@@ -8,10 +7,7 @@ export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    // Only run when the demo element exists on the current page
-    if (document.querySelector('#blackoutLabelExample')) {
-      blackoutLabelExample();
-    }
+    // example();
   } catch {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/datepicker/demo/index.md

@@ -10,8 +10,6 @@
 <auro-anchorlink fluid href="#selectRange" class="level2 body-xs">Select a Range</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
 <auro-anchorlink fluid href="#skipSelection" class="level2 body-xs">Skip Selection</auro-anchorlink>
-<auro-anchorlink fluid href="#popoverSlot" class="level2 body-xs">Date Popover</auro-anchorlink>
-<auro-anchorlink fluid href="#blackoutDates" class="level2 body-xs">Blackout Dates</auro-anchorlink>
 <auro-anchorlink fluid href="#viewportSize" class="level2 body-xs">Viewport Size</auro-anchorlink>
 </auro-nav>
 </nav>
@@ -40,21 +38,15 @@
             Click the input or press <kbd>Enter</kbd> / <kbd>Space</kbd> to open the calendar
 <div class="note">
 <p>
-                The calendar bib opens and displays the current month. The focused cell is determined in the following priority order:
+                The calendar bib opens and displays the current month. Focus moves into the calendar on the current date or, if a <code>calendarFocusDate</code> is set, on that date.
 </p>
-<ol>
-<li>The currently selected date (if one exists and is within the valid min/max range).</li>
-<li>Today's date (if it is enabled — within the min/max range).</li>
-<li>The first future enabled date.</li>
-<li>The first past enabled date.</li>
-</ol>
 </div>
 </li>
 <li>
             Select a date by clicking a calendar cell or by typing a date directly into the input
 <div class="note">
 <p>
-                When a valid date is selected, the <code>value</code> property is updated. The calendar remains open so additional dates can be reviewed. Close the calendar by pressing Escape or activating the Done button. If the user types a date, it must match the configured <code>format</code> (default <code>mm/dd/yyyy</code>).
+                When a valid date is selected, the <code>value</code> property is updated and the calendar closes (on desktop). If the user types a date, it must match the configured <code>format</code> (default <code>mm/dd/yyyy</code>).
 </p>
 </div>
 </li>
@@ -175,81 +167,6 @@
 <auro-header level="3" id="skipSelection">Skip selection</auro-header>
 <p>The datepicker does not force the user to select a date. If no selection is made and the field is not <code>required</code>, the user can move past the datepicker without entering a value.</p>
 <p>If the field is <code>required</code>, moving focus away without selecting a date triggers validation and renders the <code>valueMissing</code> error state.</p>
-<auro-header level="3" id="popoverSlot">Popover slot</auro-header>
-<p>Use the <code>popover_MM_DD_YYYY</code> slot to display additional information when the user hovers over a calendar cell. This is useful for showing pricing, availability, or other contextual details for specific dates.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-slot.html) -->
-<!-- The below content is automatically added from ./../apiExamples/popover-slot.html -->
-<auro-datepicker centralDate="12/03/2023" calendarStartDate="12/01/2023" calendarEndDate="12/31/2023" minDate="12/04/2023" maxDate="12/09/2023">
-<span slot="bib.fullscreen.headline">Popover Slot Example</span>
-<span slot="fromLabel">Choose a date</span>
-<span slot="bib.fullscreen.fromLabel">Choose a date</span>
-<span slot="popover_12_03_2023">Tickets for this day are sold out</span>
-<span slot="date_12_03_2023">$560</span>
-<span slot="popover_12_04_2023">34 seats available</span>
-<span slot="date_12_04_2023">$245</span>
-<span slot="popover_12_05_2023">18 seats available</span>
-<span slot="date_12_05_2023">$312</span>
-<span slot="popover_12_06_2023">Tickets for this day are sold out</span>
-<span slot="date_12_06_2023">$489</span>
-<span slot="popover_12_07_2023">52 seats available</span>
-<span slot="date_12_07_2023">$198</span>
-<span slot="popover_12_08_2023">7 seats available</span>
-<span slot="date_12_08_2023">$375</span>
-<span slot="popover_12_09_2023">41 seats available</span>
-<span slot="date_12_09_2023">$220</span>
-</auro-datepicker>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popover-slot.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/popover-slot.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-datepicker centralDate="12/03/2023" calendarStartDate="12/01/2023" calendarEndDate="12/31/2023" minDate="12/04/2023" maxDate="12/09/2023"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Popover Slot Example&lt;/span&gt;
-  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
-  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
-  &lt;span slot="popover_12_03_2023"&gt;Tickets for this day are sold out&lt;/span&gt;
-  &lt;span slot="date_12_03_2023"&gt;$560&lt;/span&gt;
-  &lt;span slot="popover_12_04_2023"&gt;34 seats available&lt;/span&gt;
-  &lt;span slot="date_12_04_2023"&gt;$245&lt;/span&gt;
-  &lt;span slot="popover_12_05_2023"&gt;18 seats available&lt;/span&gt;
-  &lt;span slot="date_12_05_2023"&gt;$312&lt;/span&gt;
-  &lt;span slot="popover_12_06_2023"&gt;Tickets for this day are sold out&lt;/span&gt;
-  &lt;span slot="date_12_06_2023"&gt;$489&lt;/span&gt;
-  &lt;span slot="popover_12_07_2023"&gt;52 seats available&lt;/span&gt;
-  &lt;span slot="date_12_07_2023"&gt;$198&lt;/span&gt;
-  &lt;span slot="popover_12_08_2023"&gt;7 seats available&lt;/span&gt;
-  &lt;span slot="date_12_08_2023"&gt;$375&lt;/span&gt;
-  &lt;span slot="popover_12_09_2023"&gt;41 seats available&lt;/span&gt;
-  &lt;span slot="date_12_09_2023"&gt;$220&lt;/span&gt;
-&lt;/auro-datepicker&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="blackoutDates">Blackout dates with custom label</auro-header>
-<p>Use the <code>blackoutLabel</code> attribute to customize the screen reader announcement for blackout (disabled but in-range) dates. The default label is <code>"unavailable"</code>. This is useful when you want to provide more context about why a date cannot be selected, such as <code>"sold out"</code>.</p>
-<p>When a user types a blackout date into the input, the datepicker validates the entry and displays a <code>customError</code> message. The default message is <code>"Selected date is unavailable"</code>. Use the <code>setCustomValidityCustomError</code> attribute to provide a custom error message, for example <code>setCustomValidityCustomError="That date is sold out"</code>.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/blackout-label.html) -->
-<!-- The below content is automatically added from ./../apiExamples/blackout-label.html -->
-<auro-datepicker id="blackoutLabelExample" range blackoutLabel="sold out">
-<span slot="fromLabel">Choose a start date</span>
-<span slot="toLabel">Choose an end date</span>
-<span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/blackout-label.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/blackout-label.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-datepicker id="blackoutLabelExample" range blackoutLabel="sold out"&gt;
-  &lt;span slot="fromLabel"&gt;Choose a start date&lt;/span&gt;
-  &lt;span slot="toLabel"&gt;Choose an end date&lt;/span&gt;
-  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
-&lt;/auro-datepicker&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
 <auro-header level="3" id="viewportSize">Viewport size</auro-header>
 <p>The datepicker automatically adapts its presentation based on viewport size. On larger screens, the calendar opens in a floating popover anchored to the trigger. On smaller screens, the calendar opens in a fullscreen dialog.</p>
 <p>The breakpoint at which the fullscreen behavior activates is controlled by the <code>fullscreenBreakpoint</code> attribute. The default value is <code>sm</code>. Supported values are <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>disabled</code>.</p>