@aurodesignsystem-dev/auro-formkit 0.0.0-pr1608.1 → 0.0.0-pr1609.0

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

@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202609022217';
+var formkitVersion$1 = '202609022123';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -4526,7 +4526,7 @@ class AuroFloatingUI {
 }
 
 // Selectors for focusable elements
-const FOCUSABLE_SELECTORS$1 = [
+const FOCUSABLE_SELECTORS = [
   "a[href]",
   "button:not([disabled])",
   "textarea:not([disabled])",
@@ -4540,7 +4540,7 @@ const FOCUSABLE_SELECTORS$1 = [
 ];
 
 // List of custom components that are known to be focusable
-const FOCUSABLE_COMPONENTS$1 = [
+const FOCUSABLE_COMPONENTS = [
   "auro-checkbox",
   "auro-radio",
   "auro-dropdown",
@@ -4562,12 +4562,12 @@ const FOCUSABLE_COMPONENTS$1 = [
  * @param {HTMLElement} element The element to check for focusability.
  * @returns {boolean} True if the element is a focusable custom component, false otherwise.
  */
-function isFocusableComponent$1(element) {
+function isFocusableComponent(element) {
   const componentName = element.tagName.toLowerCase();
 
   // Guard Clause: Element is a focusable component
   if (
-    !FOCUSABLE_COMPONENTS$1.some(
+    !FOCUSABLE_COMPONENTS.some(
       (name) => element.hasAttribute(name) || componentName === name,
     )
   )
@@ -4591,7 +4591,7 @@ function isFocusableComponent$1(element) {
  * @param {HTMLElement} element The element whose tabindex to read.
  * @returns {?number} The numeric tabindex or null if missing/invalid.
  */
-function getNumericTabIndex$1(element) {
+function getNumericTabIndex(element) {
   const raw = element.getAttribute("tabindex");
   if (raw == null) return null;
 
@@ -4607,7 +4607,7 @@ function getNumericTabIndex$1(element) {
  * @param {HTMLElement} container The container to search within
  * @returns {Array<HTMLElement>} An array of focusable elements within the container.
  */
-function getFocusableElements$1(container) {
+function getFocusableElements(container) {
   // Get elements in DOM order by walking the tree
   const orderedFocusableElements = [];
 
@@ -4616,7 +4616,7 @@ function getFocusableElements$1(container) {
     // Check if current element is focusable
     if (root.nodeType === Node.ELEMENT_NODE) {
       // Check if this is a custom component that is focusable
-      const isComponentFocusable = isFocusableComponent$1(root);
+      const isComponentFocusable = isFocusableComponent(root);
 
       if (isComponentFocusable) {
         // Add the component itself as a focusable element and don't traverse its shadow DOM
@@ -4625,7 +4625,7 @@ function getFocusableElements$1(container) {
       }
 
       // Check if the element itself matches any selector
-      for (const selector of FOCUSABLE_SELECTORS$1) {
+      for (const selector of FOCUSABLE_SELECTORS) {
         if (root.matches?.(selector)) {
           orderedFocusableElements.push(root);
           break; // Once we know it's focusable, no need to check other selectors
@@ -4679,20 +4679,20 @@ function getFocusableElements$1(container) {
 
   // First extract elements with valid positive tabindex
   const elementsWithTabindex = uniqueElements.filter((el) => {
-    const tabindex = getNumericTabIndex$1(el);
+    const tabindex = getNumericTabIndex(el);
     return tabindex !== null && tabindex > 0;
   });
 
   // Sort these elements by their tabindex value
   elementsWithTabindex.sort((a, b) => {
-    const aIndex = getNumericTabIndex$1(a) ?? 0;
-    const bIndex = getNumericTabIndex$1(b) ?? 0;
+    const aIndex = getNumericTabIndex(a) ?? 0;
+    const bIndex = getNumericTabIndex(b) ?? 0;
     return aIndex - bIndex;
   });
 
   // Elements without tabindex (preserving their original order)
   const elementsWithoutTabindex = uniqueElements.filter((el) => {
-    const tabindex = getNumericTabIndex$1(el);
+    const tabindex = getNumericTabIndex(el);
 
     // Elements without tabindex or with tabindex of 0 stay in DOM order
     return tabindex === null || tabindex === 0;
@@ -5487,7 +5487,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609022217';
+var formkitVersion = '202609022123';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -5787,7 +5787,7 @@ class AuroDropdown extends AuroElement$1 {
    */
   focus() {
     if (this.isPopoverVisible && this.bibContent) {
-      const focusables = getFocusableElements$1(this.bibContent);
+      const focusables = getFocusableElements(this.bibContent);
       if (focusables.length > 0) {
         focusables[0].focus();
       }
@@ -5819,7 +5819,7 @@ class AuroDropdown extends AuroElement$1 {
           // wrappers like <div> containing a <button>). If none found, try
           // focusing the element directly (works for custom elements like
           // auro-input that have delegatesFocus or a custom focus() method).
-          const descendants = getFocusableElements$1(el);
+          const descendants = getFocusableElements(el);
           if (descendants.length > 0) {
             descendants[0].focus();
             return;
@@ -5831,7 +5831,7 @@ class AuroDropdown extends AuroElement$1 {
         }
       }
       // Fallback: try DOM children (non-slotted content)
-      const focusables = getFocusableElements$1(this.trigger);
+      const focusables = getFocusableElements(this.trigger);
       if (focusables.length > 0) {
         focusables[0].focus();
       }
@@ -6510,7 +6510,7 @@ class AuroDropdown extends AuroElement$1 {
             }
 
             // Collect focusable elements from the bib content.
-            const focusables = getFocusableElements$1(this.bibContent);
+            const focusables = getFocusableElements(this.bibContent);
 
             // Fallback: try from slotted content directly
             if (!focusables.length) {
@@ -6519,7 +6519,7 @@ class AuroDropdown extends AuroElement$1 {
 
               for (const node of assignedNodes) {
                 if (node.nodeType === Node.ELEMENT_NODE) {
-                  focusables.push(...getFocusableElements$1(node));
+                  focusables.push(...getFocusableElements(node));
                 }
               }
             }
@@ -6579,7 +6579,7 @@ class AuroDropdown extends AuroElement$1 {
 
           // Move initial focus into the bib content, matching FocusTrap behavior
           requestAnimationFrame(() => {
-            const focusables = getFocusableElements$1(this.bibContent);
+            const focusables = getFocusableElements(this.bibContent);
             if (focusables.length) {
               focusables[0].focus();
             }
@@ -6592,7 +6592,7 @@ class AuroDropdown extends AuroElement$1 {
           // popover asynchronously — a synchronous focus() would target
           // zero-dimension elements and be silently ignored.
           requestAnimationFrame(() => {
-            const focusables = getFocusableElements$1(this.bibContent);
+            const focusables = getFocusableElements(this.bibContent);
             if (focusables.length) {
               focusables[0].focus();
             }
@@ -6810,7 +6810,7 @@ class AuroDropdown extends AuroElement$1 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements$1(node).length > 0);
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -7572,241 +7572,9 @@ class AuroElement extends i$2 {
   }
 }
 
-// Selectors for focusable elements
-const FOCUSABLE_SELECTORS = [
-  "a[href]",
-  "button:not([disabled])",
-  "textarea:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  '[role="tab"]:not([disabled])',
-  '[role="link"]:not([disabled])',
-  '[role="button"]:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-  '[contenteditable]:not([contenteditable="false"])',
-];
-
-// List of custom components that are known to be focusable
-const FOCUSABLE_COMPONENTS = [
-  "auro-checkbox",
-  "auro-radio",
-  "auro-dropdown",
-  "auro-button",
-  "auro-combobox",
-  "auro-input",
-  "auro-counter",
-  // 'auro-menu', // Auro menu is not focusable by default, it uses a different interaction model
-  "auro-select",
-  "auro-datepicker",
-  "auro-hyperlink",
-  "auro-accordion",
-];
-
-/**
- * Determines if a given element is a custom focusable component.
- * Returns true if the element matches a known focusable component and is not disabled.
- *
- * @param {HTMLElement} element The element to check for focusability.
- * @returns {boolean} True if the element is a focusable custom component, false otherwise.
- */
-function isFocusableComponent(element) {
-  const componentName = element.tagName.toLowerCase();
-
-  // Guard Clause: Element is a focusable component
-  if (
-    !FOCUSABLE_COMPONENTS.some(
-      (name) => element.hasAttribute(name) || componentName === name,
-    )
-  )
-    return false;
-
-  // Guard Clause: Element is not disabled
-  if (element.hasAttribute("disabled")) return false;
-
-  // Guard Clause: The element is a hyperlink and has no href attribute
-  if (componentName.match("hyperlink") && !element.hasAttribute("href"))
-    return false;
-
-  // If all guard clauses pass, the element is a focusable component
-  return true;
-}
-
-/**
- * Safely get a numeric tabindex for an element.
- * Returns a number if the tabindex is a valid integer, otherwise null.
- *
- * @param {HTMLElement} element The element whose tabindex to read.
- * @returns {?number} The numeric tabindex or null if missing/invalid.
- */
-function getNumericTabIndex(element) {
-  const raw = element.getAttribute("tabindex");
-  if (raw == null) return null;
-
-  const value = Number.parseInt(raw, 10);
-  return Number.isNaN(value) ? null : value;
-}
-
-/**
- * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
- * Returns a unique, ordered array of elements that can receive focus.
- * Also sorts elements with tabindex first, preserving their order.
- *
- * @param {HTMLElement} container The container to search within
- * @returns {Array<HTMLElement>} An array of focusable elements within the container.
- */
-function getFocusableElements(container) {
-  // Get elements in DOM order by walking the tree
-  const orderedFocusableElements = [];
-
-  // Define a recursive function to collect focusable elements in DOM order
-  const collectFocusableElements = (root) => {
-    // Check if current element is focusable
-    if (root.nodeType === Node.ELEMENT_NODE) {
-      // Check if this is a custom component that is focusable
-      const isComponentFocusable = isFocusableComponent(root);
-
-      if (isComponentFocusable) {
-        // Add the component itself as a focusable element and don't traverse its shadow DOM
-        orderedFocusableElements.push(root);
-        return; // Skip traversing inside this component
-      }
-
-      // Check if the element itself matches any selector
-      for (const selector of FOCUSABLE_SELECTORS) {
-        if (root.matches?.(selector)) {
-          orderedFocusableElements.push(root);
-          break; // Once we know it's focusable, no need to check other selectors
-        }
-      }
-
-      // Process shadow DOM only for non-Auro components
-      if (root.shadowRoot) {
-        // Process shadow DOM children in order
-        if (root.shadowRoot.children) {
-          Array.from(root.shadowRoot.children).forEach((child) => {
-            collectFocusableElements(child);
-          });
-        }
-      }
-
-      // Process slots and their assigned nodes in order
-      if (root.tagName === "SLOT") {
-        const assignedNodes = root.assignedNodes({ flatten: true });
-        for (const node of assignedNodes) {
-          collectFocusableElements(node);
-        }
-      } else {
-        // Process light DOM children in order
-        if (root.children) {
-          Array.from(root.children).forEach((child) => {
-            collectFocusableElements(child);
-          });
-        }
-      }
-    }
-  };
-
-  // Start the traversal from the container
-  collectFocusableElements(container);
-
-  // Remove duplicates that might have been collected through different paths
-  // while preserving order
-  const uniqueElements = [];
-  const seen = new Set();
-
-  for (const element of orderedFocusableElements) {
-    if (!seen.has(element)) {
-      seen.add(element);
-      uniqueElements.push(element);
-    }
-  }
-
-  // Move tab-indexed elements to the front while preserving their order
-  // This ensures that elements with tabindex are prioritized in the focus order
-
-  // First extract elements with valid positive tabindex
-  const elementsWithTabindex = uniqueElements.filter((el) => {
-    const tabindex = getNumericTabIndex(el);
-    return tabindex !== null && tabindex > 0;
-  });
-
-  // Sort these elements by their tabindex value
-  elementsWithTabindex.sort((a, b) => {
-    const aIndex = getNumericTabIndex(a) ?? 0;
-    const bIndex = getNumericTabIndex(b) ?? 0;
-    return aIndex - bIndex;
-  });
-
-  // Elements without tabindex (preserving their original order)
-  const elementsWithoutTabindex = uniqueElements.filter((el) => {
-    const tabindex = getNumericTabIndex(el);
-
-    // Elements without tabindex or with tabindex of 0 stay in DOM order
-    return tabindex === null || tabindex === 0;
-  });
-
-  // Combine both arrays with tabindex elements first
-  const tabIndexedUniqueElements = [
-    ...elementsWithTabindex,
-    ...elementsWithoutTabindex,
-  ];
-
-  return tabIndexedUniqueElements;
-}
-
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
-
-/**
- * Whether `el` is currently visible enough to receive focus. Prefers the
- * browser's `checkVisibility()`; otherwise combines a display/visibility check
- * with an ancestor-hidden probe that keeps position:fixed elements visible.
- * @param {Element} el - The element to test.
- * @returns {boolean}
- */
-function isVisibleForFocus(el) {
-  if (typeof el.checkVisibility === 'function') {
-    return el.checkVisibility();
-  }
-  const style = el.ownerDocument.defaultView.getComputedStyle(el);
-  if (style.display === 'none' || style.visibility === 'hidden') {
-    return false;
-  }
-  return el.offsetParent !== null || style.position === 'fixed';
-}
-
-/**
- * Return the tab stop that comes before the counter-group in page tab order,
- * skipping any hidden entries the walker doesn't filter itself. The group host
- * itself is not a tab stop; its focusables (the internal dropdown and the
- * counters) are, so anchor the search on the group's earliest focusable.
- * @param {Element} component - The auro-counter-group host element.
- * @returns {Element|null}
- */
-function getPreviousTabStop(component) {
-  const tabStops = getFocusableElements(component.ownerDocument.body);
-  const counters = component.counters || [];
-  const owned = [
-    component,
-    component.dropdown,
-    ...counters
-  ].filter(Boolean);
-  let groupStart = tabStops.length;
-  owned.forEach((node) => {
-    const index = tabStops.indexOf(node);
-    if (index >= 0 && index < groupStart) {
-      groupStart = index;
-    }
-  });
-  for (let index = groupStart - 1; index >= 0; index -= 1) {
-    if (isVisibleForFocus(tabStops[index])) {
-      return tabStops[index];
-    }
-  }
-  return null;
-}
-
 const counterGroupKeyboardStrategy = {
   Escape(component, evt) {
     if (!component.dropdown || !component.dropdown.isPopoverVisible) {
@@ -7820,48 +7588,6 @@ const counterGroupKeyboardStrategy = {
 
     component.dropdown.hide();
   },
-
-  Tab(component, evt, ctx) {
-    // Forward Tab already exits past the bib content and the focusout handler
-    // closes the bib. Fullscreen relies on the dialog's native focus trapping.
-    if (!ctx.isExpanded || ctx.isModal || !evt.shiftKey) {
-      return;
-    }
-
-    // The trigger precedes the bib content in the flattened tab order, so a
-    // native Shift+Tab off the first counter lands back on the trigger and
-    // leaves the bib open. Only intercept when focus is on the first focusable
-    // in the bib; otherwise let the browser move to the previous counter.
-    // `composedPath()` reports the real event origin through every shadow
-    // boundary, unlike `document.activeElement`, which retargets to the first
-    // slotted counter and cannot tell the counters apart.
-    const focusables = getFocusableElements(component.dropdown.bibContent);
-    if (!focusables.length) {
-      return;
-    }
-
-    const path = evt.composedPath();
-    const activeIndex = focusables.findIndex((el) => path.includes(el));
-    if (activeIndex !== 0) {
-      return;
-    }
-
-    const previousTabStop = getPreviousTabStop(component);
-
-    // Always suppress the native Shift+Tab. Otherwise it fires against the bib
-    // as it is torn down and lands focus on the trigger (which precedes the
-    // first counter), re-opening the exact loop this handler prevents. When
-    // nothing precedes the group, focus falls to the body instead of the
-    // trigger, which reads as exiting the group backward.
-    evt.preventDefault();
-    component.hideBib();
-
-    if (!previousTabStop) {
-      return;
-    }
-
-    doubleRaf(() => previousTabStop.focus());
-  },
 };
 
 /* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, dot-location, no-inline-comments, line-comment-position,