@adobe-commerce/elsie 2.0.0-alpha-20260717142751 → 2.0.0-beta.1

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # @adobe-commerce/elsie
 
-## 2.0.0-alpha-20260717142751
+## 2.0.0-beta.1
+
+### Patch Changes
+
+- 256007e: Fix ToggleButton generating invalid HTML ids when value prop contains spaces, breaking aria-labelledby label association
+
+## 2.0.0-beta.0
 
 ### Major Changes
 
@@ -118,7 +124,6 @@
 - 58da630: Fix `Picker` accessible name and label association. The `<select>` now falls back to `floatingLabel` or `placeholder` for its `aria-label` when no `name` is provided, and the floating `<label>` is now correctly associated with the rendered `<select>` via its generated id instead of the raw `id` prop.
 - 450c408: fix(Picker): auto-select and emit the sole option when the control auto-disables, so single-option narrowing on configurable PDPs no longer leaves the value unselected and Add to Cart permanently disabled
 - 33ebe8a: Add accessible labels to password validation and input status icons (WCAG 1.1.1)
-- a920177: fix(Incrementer): prevent quantity input flicker during in-progress typing, and prevent double onValue call when debounce fires before blur
 - 2ad7316: Fix `ToggleButton`'s underlying radio input announcing the shared radio-group `name` (e.g. "payment-method") as its accessible name for every option instead of the option's own visible label, which violates WCAG 2.4.6 (Headings and Labels) and 2.5.3 (Label in Name). The radio input's accessible name now defaults to `aria-labelledby` pointing at the option's own visible label content (e.g. "Check / Money order"), which works correctly whether `label` is a string or a `VNode`. An optional `ariaLabel` prop is still available for consumers who need to set an explicit accessible name via `aria-label` instead.
 - 016a558: Fix low-contrast field label text in `Input` when a field is in an error state. The floating label color now meets WCAG AA contrast requirements for normal-size text against light backgrounds, matching the color already used for error text elsewhere (helper text, alerts).
 - 51fcb35: fix(a11y): darken low-contrast focus indicators to meet WCAG 1.4.11 (3:1 non-text contrast)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "2.0.0-alpha-20260717142751",
+  "version": "2.0.0-beta.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -30,12 +30,12 @@
     "postpublish": "node ./scripts/publish-tools.mjs"
   },
   "devDependencies": {
-    "@adobe-commerce/event-bus": "1.1.1-alpha-20260717142751",
-    "@adobe-commerce/fetch-graphql": "1.3.1-alpha-20260717142751",
-    "@adobe-commerce/recaptcha": "1.2.1-alpha-20260717142751",
-    "@adobe-commerce/storefront-design": "1.1.1-alpha-20260717142751",
+    "@adobe-commerce/event-bus": "~1.1.1-beta.0",
+    "@adobe-commerce/fetch-graphql": "~1.3.1-beta.0",
+    "@adobe-commerce/recaptcha": "1.2.1-beta.0",
+    "@adobe-commerce/storefront-design": "~1.1.1-beta.0",
     "@chromatic-com/storybook": "^5",
-    "@dropins/build-tools": "1.2.1-alpha-20260717142751"
+    "@dropins/build-tools": "~1.2.1-beta.0"
   },
   "peerDependencies": {
     "eslint-plugin-cypress": ">=3.0.0"

package/src/components/Incrementer/Incrementer.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import { FunctionComponent } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
+import { useState, useCallback, useEffect } from 'preact/hooks';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, debounce } from '@adobe-commerce/elsie/lib';
 import { Add, Minus } from '@adobe-commerce/elsie/icons';
@@ -48,7 +48,6 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
 }) => {
   const [currentValue, setCurrentValue] = useState<number>(Number(value));
   const [isEmpty, setIsEmpty] = useState<boolean>(false);
-  const isFocusedRef = useRef<boolean>(false);
   const minValue = Number(min);
   const maxValue = Number(max);
   const isInvalid = error || isEmpty || currentValue < minValue || currentValue > maxValue;
@@ -61,45 +60,38 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
         ? 'Dropin.Incrementer.maxQuantityMessage'
         : 'Dropin.Incrementer.errorMessage';
 
-  // Keep callback refs current so debounced handlers never capture stale closures
-  const onValueRef = useRef(onValue);
-  useEffect(() => { onValueRef.current = onValue; }, [onValue]);
-
-  const onUpdateErrorRef = useRef(onUpdateError);
-  useEffect(() => { onUpdateErrorRef.current = onUpdateError; }, [onUpdateError]);
-
-  const invoke = (newValue: number) => {
-    try {
-      onValueRef.current?.(newValue);
-    } catch (e) {
-      onUpdateErrorRef.current?.(e as Error);
-    }
-  };
-
-  // Created once — stable across re-renders caused by cart/data events
-  // Buttons: 200ms debounce, created once, never recreated
-  const debouncedButtonHandler = useRef(debounce(invoke, 200)).current;
-
-  // True while the input debounce timer is still pending.
-  // Blur only calls invoke if it's cancelling a live timer — not if the timer already fired.
-  const hasPendingInputRef = useRef(false);
-  const debouncedInputHandler = useRef(
-    debounce((newValue: number) => {
-      hasPendingInputRef.current = false;
-      invoke(newValue);
-    }, 1000)
-  ).current;
-
-  // Skip server sync while user is actively typing to prevent flicker
+  // Add this effect to synchronize internal state with external value prop
   useEffect(() => {
     const propValue = Number(value);
-    if (!isFocusedRef.current && propValue !== currentValue) {
+    if (propValue !== currentValue) {
       setCurrentValue(propValue);
       setIsEmpty(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnValueHandler = useCallback(
+    debounce(async (newValue: any) => {
+      if (onValue) {
+        try {
+          onValue(newValue);
+        } catch (e) {
+          if (onUpdateError) {
+            onUpdateError(e as Error);
+          }
+        }
+      }
+    }, 200),
+    [onValue, onUpdateError]
+  );
+
+  const handleIncrementer = (_value: number) => {
+    setIsEmpty(false);
+    debouncedOnValueHandler(_value);
+    setCurrentValue(_value);
+  };
+
   return (
     <div
       className={classes([
@@ -133,8 +125,7 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
                   'dropin-incrementer__decrease-button',
                   [`dropin-incrementer__decrease-button--disabled`, disabled],
                 ])}
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={() => { setIsEmpty(false); debouncedInputHandler.cancel(); hasPendingInputRef.current = false; setCurrentValue(currentValue - 1); debouncedButtonHandler(currentValue - 1); }}
+                onClick={() => handleIncrementer(currentValue - 1)}
                 disabled={disabled || currentValue < minValue + 1}
                 aria-label={
                   (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
@@ -162,24 +153,17 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
           name={name}
           value={isEmpty ? '' : currentValue}
           disabled={disabled}
-          onFocus={() => { isFocusedRef.current = true; }}
           onBlur={() => {
-            isFocusedRef.current = false;
-            debouncedInputHandler.cancel();
-            const wasPending = hasPendingInputRef.current;
-            hasPendingInputRef.current = false;
-            if (!isEmpty && wasPending) invoke(Number(currentValue));
+            if (!isEmpty) {
+              handleIncrementer(Number(currentValue));
+            }
           }}
           onChange={(e) => {
             const newValue = e.currentTarget.value;
             if (newValue === '') {
               setIsEmpty(true);
             } else {
-              setIsEmpty(false);
-              setCurrentValue(Number(newValue));
-              debouncedButtonHandler.cancel();
-              hasPendingInputRef.current = true;
-              debouncedInputHandler(Number(newValue));
+              handleIncrementer(Number(newValue));
             }
           }}
           {...props}
@@ -200,8 +184,7 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
                   'dropin-incrementer__increase-button',
                   [`dropin-incrementer__increase-button--disabled`, disabled],
                 ])}
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={() => { setIsEmpty(false); debouncedInputHandler.cancel(); hasPendingInputRef.current = false; setCurrentValue(currentValue + 1); debouncedButtonHandler(currentValue + 1); }}
+                onClick={() => handleIncrementer(currentValue + 1)}
                 disabled={disabled || currentValue > maxValue - 1}
                 aria-label={
                   (<Text id="Dropin.Incrementer.increaseLabel" />) as any

package/src/components/ToggleButton/ToggleButton.tsx

@@ -42,7 +42,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
   selected = true,
   ...props
 }) => {
-  const contentId = `dropin-toggle-button__content-${name}-${value}`;
+  const contentId = `dropin-toggle-button__content-${name}-${value}`.replace(/\s+/g, '-');
 
   return (
     <div