@aurodesignsystem-dev/auro-formkit 0.0.0-pr1457.0 → 0.0.0-pr1457.2

package/components/counter/demo/keyboard-behavior.md

@@ -1,127 +0,0 @@
-<auro-header level="1" id="overview">Counter & Counter Group - Keyboard Behavior</auro-header>
-<div class="contentWrapper">
-<div class="mainContent">
-<div class="scrollWrapper">
-<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-<auro-header level="3" id="tabBehaviorCounter">Counter</auro-header>
-<p>The counter component is itself a focusable element. There are no sub-parts that are separately focusable.</p>
-<auro-header level="3" id="tabBehaviorCounterGroup">Counter Group</auro-header>
-<p>When multiple counters are placed inside a counter group the component behaves as an auro-dropdown. The trigger element renders a counter group label and a summary of all counter labels and current values. The dropdown bib renders all counters inside of the group.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/tabindex.md) -->
-<!-- The below content is automatically added from ./../../dropdown/docs/partials/tabindex.md -->
-<p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex sequence.</p>
-<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
-<p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="2" id="keyEvents">Key Events</auro-header>
-<auro-header level="3" id="keyEventsCounter">Counter</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents-counter.md) -->
-<!-- The below content is automatically added from ./../docs/partials/keyEvents-counter.md -->
-<table>
-<thead>
-<tr>
-<th>Key</th>
-<th>Modifier</th>
-<th>Current State</th>
-<th>Focus Element</th>
-<th>Behavior</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>ArrowDown</td>
-<td>-</td>
-<td>*</td>
-<td>
-            Trigger element.
-</td>
-<td>Decrements the counter value by 1.</td>
-</tr>
-<tr>
-<td>ArrowUp</td>
-<td>-</td>
-<td>*</td>
-<td>
-            Trigger element.
-</td>
-<td>Increments the counter value by 1.</td>
-</tr>
-</tbody>
-</table>
-<!-- AURO-GENERATED-CONTENT:END -->
-<div class="note">
-<p><strong>Note:</strong> The following keyboard behavior is unsupported at this time:</p>
-<ul>
-<li><strong>Home:</strong> sets the counter value to the defined minimum (default 0)</li>
-<li><strong>End:</strong> sets the counter value to the defined maximum (default 9)</li>
-<li><strong>PageUp:</strong> (optional) Increases the value by a larger step than Up Arrow.</li>
-<li><strong>PageDown:</strong> (optional) Decreases the value by a larger step than Down Arrow.</li>
-</ul>
-</div>
-<auro-header level="3" id="keyEventsCounterGroup">Counter Group</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents-counterGroup.md) -->
-<!-- The below content is automatically added from ./../docs/partials/keyEvents-counterGroup.md -->
-<p>The counter group itself does not have any key event handlers other than those inherited from the dropdown component. However, when the counter group is <strong>expanded</strong> or <strong>opened</strong> the first counter in the bib receives <strong>focus</strong>. When the counter group is <strong>collapsed</strong> or <strong>closed</strong> by any method other than the <code>Tab</code> key (e.g., the <strong>Escape</strong> key), <strong>focus</strong> moves to the trigger element.</p>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="4" id="keyEventsDropdown">Key Events inherited from Auro-Dropdown</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/keyEvents.md) -->
-<!-- The below content is automatically added from ./../../dropdown/docs/partials/keyEvents.md -->
-<table>
-<thead>
-<tr>
-<th>Key</th>
-<th>Modifier</th>
-<th>Current State</th>
-<th>Focus Element</th>
-<th>Behavior</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td rowspan="2">Enter</td>
-<td>-</td>
-<td>Collapsed</td>
-<td>
-            Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Opens the bib.</td>
-</tr>
-<tr>
-<td>-</td>
-<td>Expanded</td>
-<td>
-            Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Closes the bib.</td>
-</tr>
-<tr>
-<td>Escape</td>
-<td>-</td>
-<td>Expanded</td>
-<td>
-            Component <code>:host</code> or any <strong>focusable</strong> element within the component.
-</td>
-<td>Closes the bib.</td>
-</tr>
-<tr>
-<td rowspan="2">Space</td>
-<td>-</td>
-<td>Collapsed</td>
-<td>
-            Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Opens the bib.</td>
-</tr>
-<tr>
-<td>-</td>
-<td>Expanded</td>
-<td>
-            Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Closes the bib.</td>
-</tr>
-</tbody>
-</table>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-</div>

package/components/dropdown/demo/keyboard-behavior.md

@@ -1,72 +0,0 @@
-## Auro-Dropdown Keyboard Behavior
-
-### Tab Behavior
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/tabindex.md) -->
-<!-- The below content is automatically added from ./../docs/partials/tabindex.md -->
-<p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex sequence.</p>
-<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
-<p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Key Events
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
-<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
-<table>
-<thead>
-<tr>
-<th>Key</th>
-<th>Modifier</th>
-<th>Current State</th>
-<th>Focus Element</th>
-<th>Behavior</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td rowspan="2">Enter</td>
-<td>-</td>
-<td>Collapsed</td>
-<td>
-        Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Opens the bib.</td>
-</tr>
-<tr>
-<td>-</td>
-<td>Expanded</td>
-<td>
-        Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Closes the bib.</td>
-</tr>
-<tr>
-<td>Escape</td>
-<td>-</td>
-<td>Expanded</td>
-<td>
-        Component <code>:host</code> or any <strong>focusable</strong> element within the component.
-</td>
-<td>Closes the bib.</td>
-</tr>
-<tr>
-<td rowspan="2">Space</td>
-<td>-</td>
-<td>Collapsed</td>
-<td>
-        Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Opens the bib.</td>
-</tr>
-<tr>
-<td>-</td>
-<td>Expanded</td>
-<td>
-        Trigger or any <strong>focusable</strong> element within the trigger.
-</td>
-<td>Closes the bib.</td>
-</tr>
-</tbody>
-</table>
-<!-- AURO-GENERATED-CONTENT:END -->

package/components/form/demo/keyboard-behavior.md

@@ -1,38 +0,0 @@
-<auro-header level="1" id="overview">Form - Keyboard Behavior</auro-header>
-<div class="contentWrapper">
-<div class="mainContent">
-<div class="scrollWrapper">
-<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-<p>The <code>&lt;auro-form&gt;</code> component is a container element that does not participate in the <code>tabindex</code> sequence itself. The form elements it wraps (e.g., <code>&lt;auro-input&gt;</code>, <code>&lt;auro-select&gt;</code>, <code>&lt;auro-datepicker&gt;</code>) each participate independently in the browser's default <code>tabindex</code> sequence.</p>
-<auro-header level="2" id="keyEvents">Key Events</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
-<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
-<table>
-<thead>
-<tr>
-<th>Key</th>
-<th>Modifier</th>
-<th>Current State</th>
-<th>Focus Element</th>
-<th>Behavior</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Enter</td>
-<td>-</td>
-<td>Focus on a form element (not a textarea)</td>
-<td>Any tracked form element (input, select, datepicker, etc.)</td>
-<td>
-              Prevents default behavior and calls <code>submit()</code> on the form. Validates all elements and dispatches the <code>submit</code> event if the form is valid.
-</td>
-</tr>
-</tbody>
-</table>
-<div class="note">
-<p><strong>Note:</strong> The <code>Enter</code> key handler is skipped for <code>&lt;textarea&gt;</code> elements and elements with a <code>textarea</code> attribute to allow normal newline entry.</p>
-</div>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-</div>
-</div>

package/components/menu/demo/keyboard-behavior.md

@@ -1,18 +0,0 @@
-<auro-header level="1" id="overview">Menu - Keyboard Behavior</auro-header>
-<div class="contentWrapper">
-<div class="mainContent">
-<div class="scrollWrapper">
-<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-<p>The <code>&lt;auro-menu&gt;</code> component does not participate in the <code>tabindex</code> sequence directly. Keyboard navigation is managed by the parent component (e.g., <code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>) through their keyboard strategy classes.</p>
-<auro-header level="2" id="keyEvents">Key Events</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
-<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
-<!-- auro-menu does not implement direct keyboard event handling. -->
-<!-- Keyboard navigation is delegated to parent components (auro-select, auro-combobox) via their keyboard strategy files. -->
-<div class="note">
-<p><strong>Note:</strong> The <code>&lt;auro-menu&gt;</code> component does not handle keyboard events directly. Keyboard navigation is managed by the parent component (e.g., <code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>) through their keyboard strategy classes, which call menu methods such as <code>navigateOptions()</code>, <code>makeSelection()</code>, and <code>updateActiveOption()</code>.</p>
-</div>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-</div>
-</div>

package/components/radio/demo/keyboard-behavior.md

@@ -1,72 +0,0 @@
-<auro-header level="1" id="overview">Radio - Keyboard Behavior</auro-header>
-<div class="contentWrapper">
-<div class="mainContent">
-<div class="scrollWrapper">
-<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-<p>Within an <code>&lt;auro-radio-group&gt;</code>, the currently selected radio (or the first enabled radio if none is selected) participates in the browser's default <code>tabindex</code> sequence. Arrow keys move focus and selection between radios within the group.</p>
-<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence.</p>
-<auro-header level="2" id="keyEvents">Key Events</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
-<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
-<table>
-<thead>
-<tr>
-<th>Key</th>
-<th>Modifier</th>
-<th>Current State</th>
-<th>Focus Element</th>
-<th>Behavior</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Space</td>
-<td>-</td>
-<td>Not disabled</td>
-<td>Radio element</td>
-<td>
-              Selects the radio at the current focus index.
-</td>
-</tr>
-<tr>
-<td>ArrowDown</td>
-<td>-</td>
-<td>Focus within the radio group</td>
-<td>Any radio in the group</td>
-<td>
-              Selects and focuses the next enabled radio. Wraps from last to first. Skips disabled items. Calls <code>preventDefault()</code>.
-</td>
-</tr>
-<tr>
-<td>ArrowRight</td>
-<td>-</td>
-<td>Focus within the radio group</td>
-<td>Any radio in the group</td>
-<td>
-              Same as ArrowDown.
-</td>
-</tr>
-<tr>
-<td>ArrowUp</td>
-<td>-</td>
-<td>Focus within the radio group</td>
-<td>Any radio in the group</td>
-<td>
-              Selects and focuses the previous enabled radio. Wraps from first to last. Skips disabled items. Calls <code>preventDefault()</code>.
-</td>
-</tr>
-<tr>
-<td>ArrowLeft</td>
-<td>-</td>
-<td>Focus within the radio group</td>
-<td>Any radio in the group</td>
-<td>
-              Same as ArrowUp.
-</td>
-</tr>
-</tbody>
-</table>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-</div>
-</div>

package/components/radio/demo/layout.md

@@ -1,30 +0,0 @@
-<p>The component consists of the following elements:</p>
-<ul>
-<li>
-<strong>radio group:</strong> a container element (<code>&lt;auro-radio-group&gt;</code>) that manages a collection of radio buttons, handles validation, and provides a shared legend and help text.
-</li>
-<li>
-<strong>radio button:</strong> an individual selectable element (<code>&lt;auro-radio&gt;</code>) that can be toggled between selected and unselected states. Only one radio button in a group can be selected at a time.
-</li>
-<li>
-<strong>legend:</strong> descriptive label rendered above the group of radio buttons, set via the <code>legend</code> slot on the group.
-</li>
-<li>
-<strong>help text:</strong> descriptive text rendered below the group intended to help clarify the intended use of the component and any current validation error with instructions to resolve those errors.
-</li>
-</ul>
-<auro-header level="4" id="radioGroup">Radio Group</auro-header>
-<p>The group element coordinates shared behavior across all child radio buttons, including validation (e.g. <code>required</code>), error state display, and the <code>disabled</code> attribute which disables all options at once.</p>
-<auro-header level="4" id="radioButton">Radio Button</auro-header>
-<p>Each radio button renders a visual indicator (filled circle) and a label. A radio button may be in one of the following states:</p>
-<ul>
-<li>
-<code>checked</code> - The radio button is selected and its value becomes the group's value.
-</li>
-<li>
-<code>disabled</code> - The radio button is not interactive and cannot be selected.
-</li>
-<li>
-<code>error</code> - Inherited from the parent group when validation fails.
-</li>
-</ul>