@aurodesignsystem-dev/auro-formkit 0.0.0-pr1398.2 → 0.0.0-pr1398.3

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

@@ -1234,6 +1234,57 @@ class IconUtil {
  * SPDX-License-Identifier: BSD-3-Clause
  */let e$1 = class e extends i{constructor(i){if(super(i),this.it=A$2,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$2||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}};e$1.directiveName="unsafeHTML",e$1.resultType=1;
 
+/**
+ * Computes display state once per keydown event.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext$1(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return ctx;
+}
+
+/**
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
+ * Handles both sync and async handlers.
+ * @param {HTMLElement} component - The component to attach the listener to.
+ * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
+ */
+function applyKeyboardStrategy$1(component, strategy, options = {}) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext$1(component, options);
+      await handler(component, evt, ctx);
+    }
+  });
+}
+
 var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"plus-lg","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M11.898 5.007 12 5a.75.75 0 0 1 .743.648l.007.102v5.5h5.5a.75.75 0 0 1 .743.648L19 12a.75.75 0 0 1-.648.743l-.102.007h-5.501l.001 5.5a.75.75 0 0 1-.648.743L12 19a.75.75 0 0 1-.743-.648l-.007-.102-.001-5.5H5.75a.75.75 0 0 1-.743-.648L5 12a.75.75 0 0 1 .648-.743l.102-.007h5.5v-5.5a.75.75 0 0 1 .648-.743L12 5z\"/></svg>"};
 
 var minusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"minus-lg","category":"interface","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M5.75 12.75h12.5a.75.75 0 1 0 0-1.5H5.75a.75.75 0 1 0 0 1.5\"/></svg>"};
@@ -1470,7 +1521,30 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202603271519';
+var formkitVersion$1 = '202604012043';
+
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+const keyboardStrategy = {
+  ArrowUp(component, _evt) {
+    if (component.disabled) {
+      return;
+    }
+
+    _evt.preventDefault();
+    component.increment();
+  },
+
+  ArrowDown(component, _evt) {
+    if (component.disabled) {
+      return;
+    }
+
+    _evt.preventDefault();
+    component.decrement();
+  }
+};
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1544,11 +1618,10 @@ class AuroCounter extends i$2 {
 
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener('keydown', this.handleKeyDown);
+    applyKeyboardStrategy$1(this, keyboardStrategy);
   }
 
   disconnectedCallback() {
-    this.removeEventListener('keydown', this.handleKeyDown);
     super.disconnectedCallback();
   }
 
@@ -1759,29 +1832,6 @@ class AuroCounter extends i$2 {
     this.validation.validate(this, force);
   }
 
-  /**
-   * Handles the keydown event for the counter component.
-   * @param {KeyboardEvent} event - The keyboard event object.
-   * @returns {void}
-   * @private
-   */
-  handleKeyDown(event) {
-    if (this.disabled) {
-      return;
-    }
-
-    switch (event.key) {
-      case 'ArrowUp':
-        event.preventDefault();
-        this.increment();
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        this.decrement();
-        break;
-    }
-  }
-
   firstUpdated() {
     this.initValue();
     this.setTagAttribute("auro-counter");
@@ -4002,11 +4052,10 @@ class AuroFloatingUI {
       return;
     }
 
-    const { activeElement } = document;
     // if focus is still inside of trigger or bib, do not close
     if (
-      this.element.contains(activeElement) ||
-      this.element.bib?.contains(activeElement)
+      this.element.matches(":focus") ||
+      this.element.matches(":focus-within")
     ) {
       return;
     }
@@ -4845,12 +4894,83 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '9.1.2';
 
+/**
+ * Computes display state once per keydown event.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return ctx;
+}
+
+/**
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
+ * Handles both sync and async handlers.
+ * @param {HTMLElement} component - The component to attach the listener to.
+ * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
+ */
+function applyKeyboardStrategy(component, strategy, options = {}) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
+    }
+  });
+}
+
 var styleCss$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
 var tokensCss$1 = i$5`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
 
+/**
+ * Creates a keyboard strategy for dialog-specific key handling.
+ * All other keydown behavior is left to the browser's native bubbling path.
+ * @param {HTMLElement} bib - The dropdown bib element.
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
+ */
+// eslint-disable-next-line no-unused-vars
+function createDropdownBibKeyboardStrategy(bib) {
+  return {
+    // eslint-disable-next-line no-unused-vars
+    Enter(_dialog, event) {
+      // Floating UI handles Enter key to open the dropdown
+    },
+    // eslint-disable-next-line no-unused-vars
+    Escape(_dialog, event) {
+      // Floating UI handles Escape key to close the dropdown
+    }
+  };
+}
+
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 /* eslint-disable max-lines */
@@ -4975,26 +5095,11 @@ class AuroDropdownBib extends i$2 {
       },
 
       /**
-       * Set by auro-dropdown when a menu option is highlighted via
-       * aria-activedescendant. The dialog keyboard bridge checks this
-       * flag so that Enter selects the highlighted option instead of
-       * activating the focused interactive element (e.g. the trigger
-       * button, or the bibtemplate close button in fullscreen).
+       * Tracks whether a menu option is currently highlighted.
        * @private
        */
       hasActiveDescendant: {
         type: Boolean
-      },
-
-      /**
-       * When true, the keyboard bridge allows native Tab behavior
-       * instead of intercepting it. Set this for bib consumers
-       * (e.g. counter) whose content contains real focusable elements
-       * that need native Tab navigation.
-       * @private
-       */
-      nativeFocusableContent: {
-        type: Boolean
       }
     };
   }
@@ -5064,7 +5169,7 @@ class AuroDropdownBib extends i$2 {
 
     const dialog = this.shadowRoot.querySelector('dialog');
     this._setupCancelHandler(dialog);
-    this._setupKeyboardBridge(dialog);
+    applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
 
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -5091,98 +5196,6 @@ class AuroDropdownBib extends i$2 {
     });
   }
 
-  /**
-   * showModal() creates a closed focus scope — keyboard events inside
-   * the dialog's shadow DOM do NOT bubble out to the combobox/select
-   * keydown handlers in the parent shadow DOM. This handler bridges
-   * that gap by re-dispatching navigation keys so they cross the
-   * shadow boundary and reach the menu navigation logic in the parent
-   * component.
-   *
-   * The trade-off: intercepting these keys means native keyboard
-   * behaviors that would normally "just work" must be manually
-   * re-implemented here:
-   *
-   * - Enter on buttons: Custom elements (auro-button) don't get the
-   *   native Enter→click that <button> provides, so we call .click()
-   *   directly when Enter is pressed on a button-like element.
-   *
-   * - Tab: Intercepted and re-dispatched so parent components
-   *   (select/combobox) can select the active option and close the
-   *   dialog. The <dialog> provides containment and isolation
-   *   (inert background, VoiceOver focus trapping, top layer), while
-   *   the content inside is a role="listbox" navigated via
-   *   aria-activedescendant (options are not focusable). Tab keyboard
-   *   behavior follows listbox conventions (select + close) because
-   *   the dialog's native Tab trap only cycles between the close
-   *   button and browser chrome.
-   *
-   * - Escape: The native <dialog> fires a `cancel` event on ESC
-   *   (handled by _setupCancelHandler), so the re-dispatched Escape
-   *   is a secondary path for parent components that also listen for
-   *   Escape keydown.
-   *
-   * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
-   * @private
-   */
-  _setupKeyboardBridge(dialog) {
-    const navKeys = new Set([
-      'ArrowUp',
-      'ArrowDown',
-      'Enter',
-      'Escape',
-      'Tab'
-    ]);
-
-    dialog.addEventListener('keydown', (event) => {
-      if (!navKeys.has(event.key)) {
-        return;
-      }
-
-      // Custom elements (auro-button) don't get the native Enter→click
-      // behavior that <button> has. Find the button in the composed path
-      // and click it directly — but only when no menu option is
-      // highlighted. In fullscreen mode focus stays on the close button
-      // while arrow keys move the active-descendant highlight through
-      // the listbox. If the user presses Enter with an option
-      // highlighted, the intent is to select that option, not to click
-      // the close button. In that case we fall through and bridge the
-      // Enter key to the parent component's keyboard strategy.
-      if (event.key === 'Enter') {
-        if (!this.hasActiveDescendant) {
-          const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
-          const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
-          if (btn) {
-            event.preventDefault();
-            event.stopPropagation();
-            btn.click();
-            return;
-          }
-        }
-      }
-
-      // Allow native Tab when the bib contains focusable content
-      // (e.g. counter buttons) that needs normal Tab navigation.
-      if (event.key === 'Tab' && this.nativeFocusableContent) {
-        return;
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
-      const newEvent = new KeyboardEvent('keydown', {
-        key: event.key,
-        code: event.code,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      });
-      this.dispatchEvent(newEvent);
-    });
-  }
 
   /**
    * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
@@ -5557,7 +5570,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603271519';
+var formkitVersion = '202604012043';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -5738,7 +5751,6 @@ class AuroDropdown extends AuroElement$1 {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
-    this.disableFocusTrap = false;
     this.error = false;
     this.tabIndex = 0;
     this.noToggle = false;
@@ -5836,9 +5848,8 @@ class AuroDropdown extends AuroElement$1 {
     // showModal() fires asynchronously via Lit's update cycle, which
     // falls outside the user activation window and causes iOS to
     // dismiss the keyboard.
-    if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
-      const useModal = !this.disableFocusTrap;
-      this.bibElement.value.open(useModal);
+    if (this.bibElement && this.bibElement.value) {
+      this.bibElement.value.open(this.isBibFullscreen);
     }
   }
 
@@ -5951,14 +5962,6 @@ class AuroDropdown extends AuroElement$1 {
         reflect: true
       },
 
-      /**
-       * If declared, the focus trap inside of bib will be turned off.
-       */
-      disableFocusTrap: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -6232,7 +6235,7 @@ class AuroDropdown extends AuroElement$1 {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        const useModal = this.isBibFullscreen && !this.disableFocusTrap;
+        const useModal = this.isBibFullscreen;
         this.bibElement.value.open(useModal);
       } else {
         this.bibElement.value.close();
@@ -6242,7 +6245,7 @@ class AuroDropdown extends AuroElement$1 {
     // When fullscreen strategy changes while open, re-open dialog with correct mode
     // (e.g. resizing from desktop → mobile while dropdown is open)
     if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
-      const useModal = this.isBibFullscreen && !this.disableFocusTrap;
+      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
       this.bibElement.value.open(useModal);
     }
@@ -6354,7 +6357,7 @@ class AuroDropdown extends AuroElement$1 {
    * @private
    */
   updateFocusTrap() {
-    if (this.isPopoverVisible && !this.disableFocusTrap) {
+    if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
         // Desktop: show() doesn't trap focus, so use FocusTrap
         this.focusTrap = new FocusTrap(this.bibContent);
@@ -7706,11 +7709,6 @@ class AuroCounterGroup extends AuroElement {
 
     // Focus close button when fullscreen dialog opens
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
-      // Tell the bib's keyboard bridge to allow native Tab so focus
-      // moves between the real focusable counter elements in the bib.
-      if (this.dropdown.bibContent) {
-        this.dropdown.bibContent.nativeFocusableContent = true;
-      }
       if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
         doubleRaf(() => {
           this.bibtemplate.focusCloseButton();
@@ -7907,7 +7905,6 @@ class AuroCounterGroup extends AuroElement {
   renderCounterDropdown() {
     return u$5`
       <${this.dropdownTag}
-        noHideOnThisFocusLoss
         chevron
         part="dropdown"
         appearance="${this.onDark ? 'inverse' : this.appearance}"

package/components/counter/demo/keyboardBehavior.html

@@ -0,0 +1,81 @@
+<!--
+  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/index.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-counter</title>
+
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+
+    <!-- Legacy reference is still needed to support auro-counter'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" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+
+      sup {
+        font-size: 60%;
+        font-style: italic;
+        opacity: 0.6;
+        top: -.5rem;
+      }
+
+      .note {
+        margin: 10px 0;
+        padding: 10px;
+        border-radius: 6px;
+        font-style: italic;
+        color: var(--ds-basic-color-texticon-muted);
+        background-color: var(--ds-basic-color-surface-neutral-subtle);
+      }
+    </style>
+</head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./keyboardBehavior.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </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/counter/demo/keyboardBehavior.md

@@ -0,0 +1,127 @@
+<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>Esc</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>