@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.14 → 0.0.0-pr1451.15

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

@@ -1689,7 +1689,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 // 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

@@ -1681,7 +1681,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 // 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

@@ -1634,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 // 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

@@ -1634,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 // 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/api.min.js

@@ -5229,7 +5229,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605012148';
+var formkitVersion$2 = '202605041621';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12980,7 +12980,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14045,7 +14045,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 var styleCss$3 = i$7`.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/customize.md

@@ -1069,7 +1069,7 @@ Cherries
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-validity-message.html) -->
 <!-- The below content is automatically added from ./../apiExamples/custom-validity-message.html -->
-<auro-combobox required setCustomValidityValueMissing="Custom value missing message.">
+<auro-combobox required setCustomValidityValueMissing="Please select a fruit from the list.">
 <span slot="bib.fullscreen.headline">Bib Header</span>
 <span slot="label">Name</span>
 <auro-menu>
@@ -1089,7 +1089,7 @@ Cherries
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-validity-message.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/custom-validity-message.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-combobox required setCustomValidityValueMissing="Custom value missing message."&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-combobox required setCustomValidityValueMissing="Please select a fruit from the list."&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
   &lt;auro-menu&gt;

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

@@ -5140,7 +5140,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605012148';
+var formkitVersion$2 = '202605041621';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12891,7 +12891,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13956,7 +13956,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 var styleCss$3 = i$7`.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

@@ -5140,7 +5140,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605012148';
+var formkitVersion$2 = '202605041621';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12891,7 +12891,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13956,7 +13956,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 var styleCss$3 = i$7`.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

@@ -5155,7 +5155,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605012148';
+var formkitVersion$2 = '202605041621';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12906,7 +12906,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13971,7 +13971,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 var styleCss$3 = i$7`.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

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605012148';
+var formkitVersion$2 = '202605041621';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12817,7 +12817,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13882,7 +13882,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 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

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605012148';
+var formkitVersion$2 = '202605041621';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12817,7 +12817,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13882,7 +13882,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 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/api.min.js

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5729,7 +5729,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

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

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5729,7 +5729,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/dist/index.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5661,7 +5661,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/counter/dist/registered.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605012148';
+var formkitVersion$1 = '202605041621';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5661,7 +5661,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605012148';
+var formkitVersion = '202605041621';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/datepicker/README.md

@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
+The <code>&lt;auro-datepicker&gt;</code> element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The <code>&lt;auro-datepicker&gt;</code> element is the combination of <auro-hyperlink href="http://auro.alaskaair.com/components/auro/dropdown">auro-dropdown</auro-hyperlink>, <auro-hyperlink href="http://auro.alaskaair.com/components/auro/input">auro-input</auro-hyperlink>, and Auro's extension of <auro-hyperlink href="https://www.npmjs.com/package/wc-range-datepicker" target="_blank">wc-range-datepicker</auro-hyperlink>.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -32,7 +32,7 @@ The `<auro-datepicker>` element allows users to select a date, or a pair of date
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-datepicker>` element should be used in situations where users may:
+The <code>&lt;auro-datepicker&gt;</code> element should be used in situations where users may:
 
 * select a single date
 * select a pair of dates which identify a calendar range
@@ -84,18 +84,15 @@ To only develop a single component, use the `--filter` flag:
 <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
+<!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
+<p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
+<p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
+<p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
+<p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
+<!-- AURO-GENERATED-CONTENT:END -->
 
-## Custom Component Registration for Version Management
-
-There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
-
-When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
-
-However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
-
-You can do this by importing only the component class and using the `register(name)` method with a unique name:
-
 <pre class="language-js"><code class="language-js">// Import the class only
 import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
 ​
@@ -104,20 +101,9 @@ AuroDatepicker.register('custom-datepicker');</code></pre>
 
 This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
 
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-datepicker>
-<span slot="bib.fullscreen.headline">custom-datepicker Example</span>
-<span slot="fromLabel">Choose a date</span>
-<span slot="bib.fullscreen.dateLabel">Choose a date</span>
-</custom-datepicker>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
 <pre class="language-html"><code class="language-html">&lt;custom-datepicker&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;custom-datepicker Example&lt;/span&gt;
   &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
   &lt;span slot="bib.fullscreen.dateLabel"&gt;Choose a date&lt;/span&gt;
 &lt;/custom-datepicker&gt;</code></pre>
-</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/datepicker/demo/accessibility.html

@@ -0,0 +1,50 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/accessibility.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-datepicker | Accessibility</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./accessibility.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+  </body>
+</html>

package/components/datepicker/demo/accessibility.md

@@ -0,0 +1,64 @@
+<auro-header level="1" id="overview">Datepicker - Accessibility</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+The `auro-datepicker` component is built on top of `auro-dropdown` and `auro-input`, combining their accessibility features with a calendar interface. This page documents the ARIA semantics, screen reader announcements, and other accessibility behaviors built into the component.
+
+For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+
+<auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
+<auro-header level="3" id="trigger">Trigger Input</auro-header>
+The trigger contains one or two `<auro-input>` elements (depending on whether `range` is set). Each input exposes standard ARIA attributes:
+
+| Attribute | Value | Description |
+|---|---|---|
+| `aria-label` | slot text | The input receives its accessible name from the `fromLabel` or `toLabel` slot content. |
+| `aria-invalid` | `true` / `false` | Reflects whether the current value fails validation. |
+
+<auro-header level="3" id="clearButton">Clear Button</auro-header>
+The clear button (shown when the input has a value) exposes:
+
+| Attribute | Value | Description |
+|---|---|---|
+| `aria-label` | slot text or i18n default | Receives its accessible name from the `ariaLabel.input.clear` slot, falling back to a localized default. |
+
+<auro-header level="3" id="helpTextAndErrors">Help Text and Errors</auro-header>
+- 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="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).
+
+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>
+- **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.
+- 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"`.
+- A label is required. Without it, assistive technology users will not have context for what the datepicker controls.
+
+<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.
+- 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="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.
+
+<auro-header level="2" id="formParticipation">Form Participation</auro-header>
+The datepicker integrates with HTML forms through its internal `<auro-input>` elements, which render hidden native `<input>` elements with `aria-hidden="true"`. These elements:
+
+- Participate in HTML form submissions, ensuring the selected date value(s) are included in form data.
+- Support the `required` and `disabled` attributes.
+- Are invisible and unreachable by assistive technology — all user interaction goes through the custom component.
+
+</div>
+</div>
+</div>