@aurodesignsystem-dev/auro-formkit 0.0.0-pr1387.2 → 0.0.0-pr1387.4

package/components/select/dist/selectKeyboardStrategy.d.ts

@@ -1,8 +1,8 @@
 export namespace selectKeyboardStrategy {
-    export function ArrowUp(component: any, evt: any): void;
-    export function ArrowDown(component: any, evt: any): void;
+    export function ArrowUp(component: any, evt: any, ctx: any): void;
+    export function ArrowDown(component: any, evt: any, ctx: any): void;
     export function Enter(component: any, evt: any): void;
-    export function Tab(component: any): void;
+    export function Tab(component: any, _evt: any, ctx: any): void;
     function _default(component: any, evt: any): void;
     export { _default as default };
 }

package/custom-elements.json

@@ -1554,7 +1554,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ async Enter(component, evt) { // If the clear button has focus, let the browser activate it normally. // stopPropagation prevents parent containers (e.g., forms) from treating // Enter as a submit, but we must NOT call preventDefault — that would // block the browser's built-in \"Enter activates focused button\" behavior. const isBibFullscreenActive = component.dropdown && component.dropdown.isBibFullscreen && component.dropdown.isPopoverVisible; const activeInput = isBibFullscreenActive && component.inputInBib ? component.inputInBib : component.input; const clearBtn = activeInput && activeInput.shadowRoot ? activeInput.shadowRoot.querySelector('.clearBtn') : null; if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) { evt.stopPropagation(); return; } if (component.dropdown.isPopoverVisible && component.optionActive) { component.menu.makeSelection(); await component.updateComplete; evt.preventDefault(); evt.stopPropagation(); component.setClearBtnFocus(); } else { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit or trigger other unintended behavior. // This is safe because showBib() opens the dialog programmatically, // not via event propagation. evt.preventDefault(); evt.stopPropagation(); component.showBib(); } }, Tab(component) { if (!component.dropdown.isPopoverVisible) { return; } if (component.dropdown.isBibFullscreen) { const clearBtn = component.inputInBib.shadowRoot.querySelector('.clearBtn'); // Use shadowRoot.activeElement to detect focus inside auro-button, // since Safari does not propagate :focus-within through shadow DOM. const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null; // Tab from input: if clear button exists and doesn't have focus, focus it if (clearBtn && !clearBtnHasFocus && component.inputInBib.value) { // Force clear button container visible to work around Safari not // propagating :focus-within through shadow DOM boundaries, which // causes .wrapper:not(:focus-within) to hide .notification.clear. const clearContainer = clearBtn.closest('.clear'); if (clearContainer) { clearContainer.style.display = 'flex'; clearBtn.addEventListener('focusout', () => { // Delay cleanup so :focus-within settles when focus moves // to a sibling (e.g., Shift+Tab back to the input). requestAnimationFrame(() => { clearContainer.style.display = ''; }); }, { once: true }); } // Focus the native button inside auro-button so the browser // treats it as a real focusable element inside the dialog. const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button'); if (nativeBtn) { nativeBtn.focus(); } else { clearBtn.focus(); } return; } // Tab from clear button (or no clear button / no value) → // select the highlighted option if any, then close if (component.optionActive) { component.menu.makeSelection(); } component.hideBib(); return; } // Non-fullscreen: select + close if (component.menu.optionActive && component.menu.optionActive.value) { component.menu.value = component.menu.optionActive.value; } component.hideBib(); }, ArrowUp(component, evt) { // If the clear button has focus, let the browser handle ArrowUp normally if (component.clearBtnFocused) { return; } if (component.availableOptions.length > 0) { component.showBib(); } if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'up'); } }, ArrowDown(component, evt) { // If the clear button has focus, let the browser handle ArrowDown normally if (component.clearBtnFocused) { return; } if (component.availableOptions.length > 0) { component.showBib(); } if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'down'); } }, }"
+          "default": "{ async Enter(component, evt, ctx) { // If the clear button has focus, let the browser activate it normally. // stopPropagation prevents parent containers (e.g., forms) from treating // Enter as a submit, but we must NOT call preventDefault — that would // block the browser's built-in \"Enter activates focused button\" behavior. if (isClearBtnFocused(ctx)) { evt.stopPropagation(); return; } if (ctx.isExpanded && component.optionActive) { component.menu.makeSelection(); await component.updateComplete; evt.preventDefault(); evt.stopPropagation(); component.setClearBtnFocus(); } else { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit or trigger other unintended behavior. // This is safe because showBib() opens the dialog programmatically, // not via event propagation. evt.preventDefault(); evt.stopPropagation(); component.showBib(); } }, Tab(component, _evt, ctx) { if (!ctx.isExpanded) { return; } if (ctx.isModal) { if (!ctx.activeInput) { return; } const clearBtn = getClearBtn(ctx); const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn); // Tab from input: if clear button exists and doesn't have focus, focus it if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) { // Force clear button container visible to work around Safari not // propagating :focus-within through shadow DOM boundaries, which // causes .wrapper:not(:focus-within) to hide .notification.clear. const clearContainer = clearBtn.closest('.clear'); if (clearContainer) { clearContainer.style.display = 'flex'; clearBtn.addEventListener('focusout', () => { // Delay cleanup so :focus-within settles when focus moves // to a sibling (e.g., Shift+Tab back to the input). requestAnimationFrame(() => { clearContainer.style.display = ''; }); }, { once: true }); } // Focus the native button inside auro-button so the browser // treats it as a real focusable element inside the dialog. const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button'); if (nativeBtn) { nativeBtn.focus(); } else { clearBtn.focus(); } return; } // Tab from clear button (or no clear button / no value) → // select the highlighted option if any, then close if (component.optionActive) { component.menu.makeSelection(); } component.hideBib(); return; } // Non-fullscreen: select + close if (component.menu.optionActive && component.menu.optionActive.value) { component.menu.value = component.menu.optionActive.value; } component.hideBib(); }, ArrowUp(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowUp normally. if (isClearBtnFocused(ctx)) { return; } if (component.availableOptions.length > 0) { component.showBib(); } // Read live visibility — ctx.isExpanded was computed before showBib() above, // so it wouldn't reflect the state change. if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'up'); } }, ArrowDown(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowDown normally. if (isClearBtnFocused(ctx)) { return; } if (component.availableOptions.length > 0) { component.showBib(); } // Read live visibility — ctx.isExpanded was computed before showBib() above, // so it wouldn't reflect the state change. if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'down'); } }, }"
         }
       ],
       "exports": [
@@ -3733,6 +3733,21 @@
               "description": "Handles the change event for the default slot.\nUpdates the defaultSlot property with the trimmed text content of the first assigned node.",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "onDescriptionSlotChange",
+              "parameters": [
+                {
+                  "name": "event",
+                  "description": "The slotchange event.",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Sets ariaDescribedByElements on the spinbutton to the slotted description elements,\nbridging the shadow DOM boundary for screen readers.",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderHelpText",
@@ -5642,17 +5657,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "handleReadOnly",
-              "description": "Sets the readonly attribute on the inputs based on the window width.",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "handleCalendarCentralDateChange",
@@ -9082,81 +9086,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/dropdown/src/keyboardUtils.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "applyKeyboardStrategy",
-          "parameters": [
-            {
-              "name": "component",
-              "description": "The component to attach the listener to.",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "name": "strategy",
-              "description": "Map of key names to handler functions.",
-              "type": {
-                "text": "Object"
-              }
-            }
-          ],
-          "description": "Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.\nHandles both sync and async handlers."
-        },
-        {
-          "kind": "function",
-          "name": "navigateArrow",
-          "parameters": [
-            {
-              "name": "component",
-              "description": "The component with dropdown and menu references.",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "name": "direction",
-              "description": "'up' or 'down'.",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "options",
-              "default": "{}",
-              "description": "Optional config.",
-              "optional": true,
-              "type": {
-                "text": "@param {Function} [options.showFn] - Called to open the dropdown when closed.\n "
-              }
-            }
-          ],
-          "description": "Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.\nOptionally opens dropdown via showFn when closed."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "applyKeyboardStrategy",
-          "declaration": {
-            "name": "applyKeyboardStrategy",
-            "module": "components/dropdown/src/keyboardUtils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "navigateArrow",
-          "declaration": {
-            "name": "navigateArrow",
-            "module": "components/dropdown/src/keyboardUtils.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/dropdown/src/registered.js",
@@ -18699,7 +18628,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ ArrowUp(component, evt) { evt.preventDefault(); navigateArrow(component, 'up', { showFn: () => component.dropdown.show() }); }, ArrowDown(component, evt) { evt.preventDefault(); navigateArrow(component, 'down', { showFn: () => component.dropdown.show() }); }, Enter(component, evt) { evt.preventDefault(); component.menu.makeSelection(); }, Tab(component) { if (!component.dropdown.isPopoverVisible) { 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) { 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; } // 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); }, }"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1387.2",
+  "version": "0.0.0-pr1387.4",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -46,7 +46,7 @@
     "dev:svelte": "concurrently \"npx turbo run build:watch --concurrency=20\" \"npm run dev:app:open --workspace=apps/svelte-framework\"",
     "dev:react": "concurrently \"npx turbo run build:watch --concurrency=20\" \"npm run dev:app:open --workspace=apps/react-framework\"",
     "lint": "turbo run lint",
-    "test": "turbo run test",
+    "test": "turbo run test && npm run test:frameworks",
     "test:watch": "turbo run test:watch",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
@@ -73,7 +73,8 @@
     "lit": "^3.3.1"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "*"
+    "@rollup/rollup-linux-x64-gnu": "*",
+    "@rolldown/binding-linux-x64-gnu": "*"
   },
   "devDependencies": {
     "@aurodesignsystem/auro-accordion": "^6.1.1",

package/components/dropdown/dist/keyboardUtils.d.ts

@@ -1,18 +0,0 @@
-/**
- * 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.
- */
-export function applyKeyboardStrategy(component: HTMLElement, strategy: any): void;
-/**
- * Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
- * Optionally opens dropdown via showFn when closed.
- * @param {HTMLElement} component - The component with dropdown and menu references.
- * @param {string} direction - 'up' or 'down'.
- * @param {Object} [options] - Optional config.
- * @param {Function} [options.showFn] - Called to open the dropdown when closed.
- */
-export function navigateArrow(component: HTMLElement, direction: string, options?: {
-    showFn?: Function;
-}): void;