@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.9 → 0.0.0-pr1411.0

package/custom-elements.json

@@ -3584,6 +3584,30 @@
               "kind": "method",
               "name": "_initializeDefaults"
             },
+            {
+              "kind": "field",
+              "name": "value",
+              "privacy": "public",
+              "type": {
+                "text": "number"
+              },
+              "description": "Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.",
+              "return": {
+                "type": {
+                  "text": "number|undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "description": "The value to set for the counter. Can be a number, a string that can be converted to a number, undefined, or null.",
+                  "name": "val",
+                  "type": {
+                    "text": "number|string|undefined|null"
+                  }
+                }
+              ],
+              "attribute": "value"
+            },
             {
               "kind": "method",
               "name": "register",
@@ -3683,26 +3707,6 @@
               ],
               "description": "Validates value."
             },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "description": "The keyboard event object.",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles the keydown event for the counter component.",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "setTagAttribute",
@@ -3865,16 +3869,6 @@
               "description": "The validity state of the counter.",
               "attribute": "validity",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "privacy": "public",
-              "type": {
-                "text": "number"
-              },
-              "description": "The current value of the counter.",
-              "attribute": "value"
             }
           ],
           "events": [
@@ -3972,7 +3966,21 @@
               "type": {
                 "text": "number"
               },
-              "description": "The current value of the counter.",
+              "description": "Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.",
+              "return": {
+                "type": {
+                  "text": "number|undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "description": "The value to set for the counter. Can be a number, a string that can be converted to a number, undefined, or null.",
+                  "name": "val",
+                  "type": {
+                    "text": "number|string|undefined|null"
+                  }
+                }
+              ],
               "fieldName": "value"
             }
           ],
@@ -4048,6 +4056,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/counter/src/keyboardStrategy.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "keyboardStrategy",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ ArrowUp(component, _evt) { if (component.disabled) { return; } _evt.preventDefault(); component.increment(); }, ArrowDown(component, _evt) { if (component.disabled) { return; } _evt.preventDefault(); component.decrement(); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "keyboardStrategy",
+          "declaration": {
+            "name": "keyboardStrategy",
+            "module": "components/counter/src/keyboardStrategy.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/counter/src/registered.js",
@@ -8253,17 +8285,6 @@
               "attribute": "disabled",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "disableFocusTrap",
-              "privacy": "public",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If declared, the focus trap inside of bib will be turned off.",
-              "attribute": "disableFocusTrap",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "dropdownWidth",
@@ -8547,14 +8568,6 @@
               "description": "If declared, the dropdown is not interactive.",
               "fieldName": "disabled"
             },
-            {
-              "name": "disableFocusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If declared, the focus trap inside of bib will be turned off.",
-              "fieldName": "disableFocusTrap"
-            },
             {
               "name": "dropdownWidth",
               "type": {
@@ -8821,21 +8834,6 @@
               "description": "Forwards the dialog's native `cancel` event (fired on ESC) as\nan `auro-bib-cancel` custom event so parent components can close.",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "_setupKeyboardBridge",
-              "parameters": [
-                {
-                  "name": "dialog",
-                  "description": "The dialog element to attach the keyboard bridge to.",
-                  "type": {
-                    "text": "HTMLDialogElement"
-                  }
-                }
-              ],
-              "description": "showModal() creates a closed focus scope — keyboard events inside\nthe dialog's shadow DOM do NOT bubble out to the combobox/select\nkeydown handlers in the parent shadow DOM. This handler bridges\nthat gap by re-dispatching navigation keys so they cross the\nshadow boundary and reach the menu navigation logic in the parent\ncomponent.\n\nThe trade-off: intercepting these keys means native keyboard\nbehaviors that would normally \"just work\" must be manually\nre-implemented here:\n\n- Enter on buttons: Custom elements (auro-button) don't get the\n  native Enter→click that <button> provides, so we call .click()\n  directly when Enter is pressed on a button-like element.\n\n- Tab: Intercepted and re-dispatched so parent components\n  (select/combobox) can select the active option and close the\n  dialog. The <dialog> provides containment and isolation\n  (inert background, VoiceOver focus trapping, top layer), while\n  the content inside is a role=\"listbox\" navigated via\n  aria-activedescendant (options are not focusable). Tab keyboard\n  behavior follows listbox conventions (select + close) because\n  the dialog's native Tab trap only cycles between the close\n  button and browser chrome.\n\n- Escape: The native <dialog> fires a `cancel` event on ESC\n  (handled by _setupCancelHandler), so the re-dispatched Escape\n  is a secondary path for parent components that also listen for\n  Escape keydown.",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "_lockTouchScroll",
@@ -8899,7 +8897,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set by auro-dropdown when a menu option is highlighted via\naria-activedescendant. The dialog keyboard bridge checks this\nflag so that Enter selects the highlighted option instead of\nactivating the focused interactive element (e.g. the trigger\nbutton, or the bibtemplate close button in fullscreen).",
+              "description": "Tracks whether a menu option is currently highlighted.",
               "default": "false",
               "attribute": "hasActiveDescendant"
             },
@@ -9079,7 +9077,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set by auro-dropdown when a menu option is highlighted via\naria-activedescendant. The dialog keyboard bridge checks this\nflag so that Enter selects the highlighted option instead of\nactivating the focused interactive element (e.g. the trigger\nbutton, or the bibtemplate close button in fullscreen).",
+              "description": "Tracks whether a menu option is currently highlighted.",
               "default": "false",
               "fieldName": "hasActiveDescendant"
             }
@@ -9102,6 +9100,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/dropdown/src/dropdownBibKeyboardStrategy.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createDropdownBibKeyboardStrategy",
+          "parameters": [
+            {
+              "name": "bib",
+              "description": "The dropdown bib element.",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Creates a keyboard strategy for dialog-specific key handling.\nAll other keydown behavior is left to the browser's native bubbling path.",
+          "return": {
+            "type": {
+              "text": "Object"
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createDropdownBibKeyboardStrategy",
+          "declaration": {
+            "name": "createDropdownBibKeyboardStrategy",
+            "module": "components/dropdown/src/dropdownBibKeyboardStrategy.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/dropdown/src/iconVersion.js",
@@ -15086,21 +15119,6 @@
               "description": "Handles nested menu structure.",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "description": "Event object from the browser.",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles keyboard navigation.",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "navigateOptions",
@@ -18674,7 +18692,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ ArrowUp(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); }, ArrowDown(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); }, Enter(component, evt) { evt.preventDefault(); component.menu.makeSelection(); }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Shift+Tab moves the highlight to the first non-disabled option // without making a selection or closing the bib. if (evt.shiftKey) { evt.preventDefault(); const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive); if (firstActive) { component.menu.updateActiveOption(firstActive); } return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive && !component.multiSelect) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt) { component.updateActiveOptionBasedOnKey(evt.key); }, }"
+          "default": "{ ArrowUp(component, evt, ctx) { // Navigate menu only if the bib is open, otherwise open the bib evt.preventDefault(); if (evt.altKey || evt.metaKey) { // navigate to first enabled option } else if (component.dropdown.isPopoverVisible) { navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); } else { component.dropdown.show(); } }, ArrowDown(component, evt, ctx) { // Navigate menu only if the bib is open, otherwise open the bib evt.preventDefault(); if (evt.altKey || evt.metaKey) { // navigate to last enabled option } else if (component.dropdown.isPopoverVisible) { navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); } else { component.dropdown.show(); } }, Enter(component, evt, ctx) { if (!ctx.isExpanded && ctx.isPopover) { component.menu.makeSelection(); } else if (ctx.isModal && !evt.defaultPrevented) { // for modal, isExpanded is always true // defaultPrevented will be true if Floating UI has already handled the event to open the dropdown component.menu.makeSelection(); } }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive && !component.multiSelect) { component.menu.makeSelection(); } component.dropdown.hide(); }, Home(component, evt) { evt.preventDefault(); evt.stopPropagation(); const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled); if (firstOption) { component.menu.updateActiveOption(firstOption); } }, End(component, evt) { evt.preventDefault(); evt.stopPropagation(); const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled); if (lastOption) { component.menu.updateActiveOption(lastOption); } }, default(component, evt) { component.updateActiveOptionBasedOnKey(evt.key); }, }"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1408.9",
+  "version": "0.0.0-pr1411.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -66,7 +66,9 @@
     "build-storybook": "npm run build && npm run analyze && storybook build",
     "test:framework:react": "turbo run test:framework --filter=@aurodesignsystem/react-framework",
     "test:framework:svelte": "turbo run test:framework --filter=@aurodesignsystem/svelte-framework",
-    "test:frameworks": "turbo run test:framework --filter=@aurodesignsystem/react-framework --filter=@aurodesignsystem/svelte-framework"
+    "test:frameworks": "turbo run test:framework --filter=@aurodesignsystem/react-framework --filter=@aurodesignsystem/svelte-framework",
+    "test:framework:report:react": "npm run test:framework:report -w apps/react-framework",
+    "test:framework:report:svelte": "npm run test:framework:report -w apps/svelte-framework"
   },
   "dependencies": {
     "@lit/context": "^1.1.6",
@@ -80,7 +82,7 @@
   "devDependencies": {
     "@aurodesignsystem/auro-accordion": "^6.1.1",
     "@aurodesignsystem/auro-button": "^12.3.2",
-    "@aurodesignsystem/auro-library": "^5.11.2",
+    "@aurodesignsystem/auro-library": "^5.11.3",
     "@aurodesignsystem/build-tools": "*",
     "@aurodesignsystem/config": "*",
     "@aurodesignsystem/design-tokens": "^8.15.1",