@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

package/components/combobox/demo/keyboardBehavior.md

@@ -1,281 +0,0 @@
-<auro-header level="1" id="overview">Combobox - 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 component trigger contains an <code>&lt;auro-input&gt;</code> which has two elements:</p>
-      <ol>
-        <li><strong>Input</strong></li>
-        <li><strong>Clear button:</strong> only shown when the input has a value.</li>
-      </ol>
-      <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> 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>On <strong>large viewport devices</strong> (e.g., desktop browser, tablet) there is no focusable content inside the component bib.</p>
-      <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which can receive <strong>Click</strong> and <strong>Tap</strong> events.</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 -->
-      <div class="note">
-        <p><strong>Static vs Dynamic Option List:</strong> The <strong>expanded</strong> state can never be applied without list options rendered into the DOM. Since the component supports dynamic option lists generated <em>after</em> a value is typed into the <strong>input</strong>, certain key events (as noted in the <strong>Current State</strong> column of the table below) only function with the option list rendered into the DOM.</p>
-      </div>
-      <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="6">ArrowDown</td>
-            <td rowspan="2">-</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Trigger input element, <strong>NOT</strong> the trigger input clear button
-            </td>
-            <td>Opens the bib.</td>
-          </tr>
-          <tr>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs depending on viewport size.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the next enabled option in the list. If the current <code>focused</code> option is the last enabled option, selection wraps to the first enabled option.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Command</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Trigger input element, <strong>NOT</strong> the trigger input clear button
-            </td>
-            <td>Opens the bib.</td>
-          </tr>
-          <tr>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the last enabled option in the list.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Option</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Trigger input element, <strong>NOT</strong> the trigger input clear button
-            </td>
-            <td>Opens the bib.</td>
-          </tr>
-          <tr>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the last enabled option in the list.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="6">ArrowUp</td>
-            <td rowspan="2">-</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Trigger input element, <strong>NOT</strong> the trigger input clear button
-            </td>
-            <td>Opens the bib.</td>
-          </tr>
-          <tr>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the previous enabled option in the list. If the current <code>focused</code> option is the first enabled option, selection wraps to the last enabled option.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Command</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Trigger input element, <strong>NOT</strong> the trigger input clear button
-            </td>
-            <td>Opens the bib.</td>
-          </tr>
-          <tr>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the first enabled option in the list.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Option</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-            </td>
-            <td>Opens the bib.</td>
-          </tr>
-          <tr>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the first enabled option in the list.
-            </td>
-          </tr>
-          <tr>
-            <td>End</td>
-            <td>-</td>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the last enabled option in the list.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="4">Enter</td>
-            <td rowspan="4">-</td>
-            <td>Collapsed, list options have been populated</td>
-            <td>
-              Trigger input, <strong>NOT</strong> the input clear button
-            </td>
-            <td>
-             The bib is opened.
-            </td>
-          </tr>
-          <tr>
-            <td>Collapsed</td>
-            <td>
-              Input clear button, <strong>NOT</strong> the input element
-            </td>
-            <td>
-              The <strong>input</strong> value is cleared, <strong>focus</strong> moves to the trigger input element.
-            </td>
-          </tr>
-          <tr>
-            <td>Expanded, large viewport device</td>
-            <td>
-              Trigger input element, <strong>NOT</strong> the trigger input clear button
-            </td>
-            <td>
-              The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
-            </td>
-          </tr>
-          <tr>
-            <td>Expanded, small viewport device</td>
-            <td>
-              Dialog input element, <strong>NOT</strong> the dialog input clear button
-            </td>
-            <td>
-              The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
-            </td>
-          </tr>
-          <tr>
-            <td>Escape</td>
-            <td>-</td>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Closes the bib, moves <strong>focus</strong> to the trigger input element.
-            </td>
-          </tr>
-          <tr>
-            <td>Home</td>
-            <td>-</td>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the first enabled option in the list.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Tab</td>
-            <td>-</td>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.
-            </td>
-          </tr>
-          <tr>
-            <td>Shift</td>
-            <td>Expanded</td>
-            <td>
-              Input element, <strong>NOT</strong> the input clear button
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content inputs.
-              </div>
-            </td>
-            <td>
-              Advances the <code>focused</code> option to the first enabled option in the list.
-              <div class="note">
-                <strong>Note:</strong> the bib will <strong>NOT</strong> close and the page will <strong>NOT</strong> navigate to the previous focusable element in the tabindex order.
-              </div>
-            </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>PageUp:</strong> The browser moves the <code>focused</code> option up by approximately one <strong>page</strong> of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly focused option is brought into view, usually aligning near the top of the visible list.</li>
-          <li><strong>PageDown:</strong> The browser advances the <code>focused</code> option down by approximately one <strong>page</strong> of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly focused option is brought into view, often aligning near the bottom of the visible list.</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
-## DEVELOPER NOTES / CODE ACTION ITEMS / TODO ITEMS
-1. Remove the bridge for keyboard event bubbling out of the bib
-1. Prevent auro-dropdown `Enter` and `Space` key behavior for opening and closing the bib.
-1. Strip out key event listeners not listed in this document

package/components/counter/demo/keyboardBehavior.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, i.e., these keys step through the browser tabindex sequence.</auro-hyperlink></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/datepicker/demo/keyboardBehavior.md

@@ -1,19 +0,0 @@
-<auro-header level="1" id="overview">Datepicker - 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 component trigger contains <code>&lt;auro-input&gt;</code> element(s) which each have two focusable elements:</p>
-      <ol>
-        <li><strong>Input</strong></li>
-        <li><strong>Clear button:</strong> only shown when the input has a value.</li>
-      </ol>
-      <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> 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>
-      <div class="note">
-        <p><strong>Note:</strong> The current implementation <strong>DOES</strong> support full interaction of the bib content and calendar with touch, click and VoiceOver interactions.</p>
-        <p>The current implementation of the component <strong>DOES</strong> support using the keyboard to navigate the trigger and type dates via the keyboard. It <strong>DOES NOT</strong> support navigating the bib content and calendar via the keyboard. This functionality is scheduled to be added in the next major redesign of the component.</p>
-      </div>
-    </div>
-  </div>
-</div>

package/components/dropdown/demo/keyboardBehavior.md

@@ -1,77 +0,0 @@
-## 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, i.e., these keys step through the browser tabindex sequence.</auro-hyperlink></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 -->
-
-## DEVELOPER NOTES / CODE ACTION ITEMS / TODO ITEMS
-1. Remove the bridge for keyboard event bubbling out of the bib
-1. Strip out event listeners not listed in this document (e.g. arrow keys)
-1. do not prevent any event bubbling beyond the focus trap of a fullscreen bib