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

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,79 +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" blackoutLabel="sold out">
-<span slot="fromLabel">Choose a 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" blackoutLabel="sold out"&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>
 <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>