@skyscanner/backpack-web 41.10.0-beta-v1 → 41.11.1-beta.1

package/bpk-component-card-list/src/BpkCardListRowRail/utils.js

@@ -19,25 +19,6 @@
 import { useEffect, useRef } from 'react';
 import { RELEASE_LOCK_DELAY } from "./constants";
 
-/**
- * Typically used to prevent useScrollToCard() from being called, to prevent scrollings caused by state changes, so as to avoid cyclic dependencies.
- * @param stateScrollingLockRef - Ref to the state that indicates if scrollIntoView should be locked
- * @param openSetStateLockTimeoutRef - Ref to the timeout that releases the lock after a delay. Should be renewed every time another scroll action is triggered, with a new lock is added.
- */
-
-export const lockScroll = (stateScrollingLockRef, openSetStateLockTimeoutRef) => {
-  // eslint-disable-next-line no-param-reassign
-  stateScrollingLockRef.current = true;
-  if (openSetStateLockTimeoutRef.current) {
-    clearTimeout(openSetStateLockTimeoutRef.current);
-  }
-  // eslint-disable-next-line no-param-reassign
-  openSetStateLockTimeoutRef.current = setTimeout(() => {
-    // eslint-disable-next-line no-param-reassign
-    stateScrollingLockRef.current = false;
-  }, RELEASE_LOCK_DELAY);
-};
-
 /**
  * Only sets the tabIndex of focusable elements as 0 if the card is visible, otherwise sets it to -1, including all its children.
  * For example, if there is a button inside a card which is not shown, it cannot be focused as well.
@@ -53,22 +34,6 @@ export const setA11yTabIndex = (el, index, visibilityList) => {
     targetElement.tabIndex = visibilityList[index] === 1 ? 0 : -1;
   });
 };
-export const useScrollToCard = (currentIndex, container, cardRefs, stateScrollingLockRef) => {
-  useEffect(() => {
-    const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
-    if (!isVisible) return; // Escape from scrollIntoView if the container is not visible, otherwise the webpage will scroll down to the last rendered & non-visible container
-
-    if (stateScrollingLockRef.current && stateScrollingLockRef.current === true) return;
-    const targetCard = cardRefs.current[currentIndex];
-    if (targetCard) {
-      targetCard.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start'
-      });
-    }
-  }, [currentIndex]);
-};
 export const useIntersectionObserver = ({
   root,
   threshold
@@ -115,4 +80,122 @@ export const useIntersectionObserver = ({
     }
   };
   return observeElement;
+};
+/**
+ * Provides bidirectional synchronisation between page index state and scroll position.
+ *
+ * - **State → Scroll**: When `currentIndex` changes (e.g. via pagination buttons),
+ *   the container scrolls to bring the corresponding page into view.
+ * - **Scroll → State**: When the user scrolls (via wheel or touch), `currentIndex`
+ *   is updated to reflect the first visible page.
+ *
+ * The hook uses a lock mechanism to prevent conflicts between programmatic and
+ * user-initiated scrolling.
+ */
+
+export const usePageScrollSync = ({
+  cardRefs,
+  container,
+  currentIndex,
+  enabled,
+  initialPageIndex,
+  initiallyShownCards,
+  setCurrentIndex,
+  visibilityList
+}) => {
+  const isUserScrollingRef = useRef(false);
+  const scrollEndTimeoutRef = useRef(null);
+  const lastCurrentIndexRef = useRef(currentIndex);
+  const hasInitialScrolled = useRef(false);
+
+  // Effect 0: Initial scroll (instant, runs once on mount)
+  useEffect(() => {
+    if (hasInitialScrolled.current) {
+      return;
+    }
+    hasInitialScrolled.current = true;
+    if (!enabled || initialPageIndex === 0) {
+      return;
+    }
+    const targetCard = cardRefs.current?.[initialPageIndex * initiallyShownCards];
+    if (targetCard) {
+      targetCard.scrollIntoView({
+        behavior: 'instant',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [cardRefs, enabled, initialPageIndex, initiallyShownCards]); // Run once on mount only
+
+  // Effect 1: Programmatic scroll when currentIndex changes
+  useEffect(() => {
+    if (!enabled ||
+    // Avoid triggering programmatic scroll when currentIndex changes due to user scroll
+    isUserScrollingRef.current || lastCurrentIndexRef.current === currentIndex) {
+      return;
+    }
+    lastCurrentIndexRef.current = currentIndex;
+    const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
+    if (!isVisible) {
+      return;
+    }
+    const targetCard = cardRefs.current?.[currentIndex * initiallyShownCards];
+    if (targetCard) {
+      targetCard.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [currentIndex, enabled, container, initiallyShownCards, cardRefs]);
+
+  // Effect 2: Scroll detection and silence-based lock release
+  useEffect(() => {
+    if (!enabled || !container) return undefined;
+    const handleScrollActivity = e => {
+      // Set flag only for user input events, not scroll events
+      if (e.type === 'wheel' || e.type === 'touchstart') {
+        isUserScrollingRef.current = true;
+      }
+
+      // Reset silence timer on every scroll-related event
+      if (scrollEndTimeoutRef.current) {
+        clearTimeout(scrollEndTimeoutRef.current);
+      }
+
+      // Release lock after scroll silence
+      scrollEndTimeoutRef.current = setTimeout(() => {
+        isUserScrollingRef.current = false;
+      }, RELEASE_LOCK_DELAY);
+    };
+    container.addEventListener('scroll', handleScrollActivity, {
+      passive: true
+    });
+    container.addEventListener('wheel', handleScrollActivity, {
+      passive: true
+    });
+    container.addEventListener('touchstart', handleScrollActivity, {
+      passive: true
+    });
+    return () => {
+      container.removeEventListener('scroll', handleScrollActivity);
+      container.removeEventListener('wheel', handleScrollActivity);
+      container.removeEventListener('touchstart', handleScrollActivity);
+      if (scrollEndTimeoutRef.current) {
+        clearTimeout(scrollEndTimeoutRef.current);
+      }
+    };
+  }, [enabled, container]);
+
+  // Effect 3: Update currentIndex from visibility during user scroll
+  useEffect(() => {
+    if (!enabled || !isUserScrollingRef.current) return;
+    const firstVisibleIndex = visibilityList.indexOf(1);
+    if (firstVisibleIndex === -1) return;
+    const newPageIndex = Math.floor(firstVisibleIndex / initiallyShownCards);
+    if (newPageIndex !== currentIndex) {
+      setCurrentIndex(newPageIndex);
+      lastCurrentIndexRef.current = newPageIndex;
+    }
+  }, [visibilityList, enabled, initiallyShownCards, currentIndex, setCurrentIndex]);
 };

package/bpk-component-card-list/src/common-types.d.ts

@@ -36,6 +36,7 @@ type CardListBaseProps = {
     accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
     initiallyShownCardsDesktop?: number;
     initiallyShownCardsMobile?: number;
+    initiallyInViewCardIndex?: number;
     chipGroup?: ReactElement;
     buttonContent?: React.ReactNode;
     onButtonClick?: () => void;
@@ -69,6 +70,7 @@ type CardListRowRailProps = {
     accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
     isMobile?: boolean;
     accessibilityLabels?: AccessibilityLabels;
+    initiallyInViewCardIndex: number;
 };
 type CardListCarouselProps = {
     children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
@@ -79,6 +81,7 @@ type CardListCarouselProps = {
     isMobile?: boolean;
     carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
     slideLabel?: (index: number, childrenLength: number) => string;
+    initialPageIndex: number;
 };
 type CardListProps = CardListBaseProps;
 export default CardListProps;

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -23,7 +23,7 @@ accessory view of a close icon.
 */
 import { chipColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import CloseCircleIconSm from "../../bpk-component-icon/sm/close-circle";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
@@ -48,7 +48,8 @@ const BpkDismissibleChip = ({
     type: type,
     role: "button" // Override role="checkbox" because this chip is not selectable.
     ,
-    className: classNames
+    className: classNames,
+    ...getDataComponentAttribute('DismissibleChip')
   });
 };
 export default BpkDismissibleChip;

package/bpk-component-chip/src/BpkDropdownChip.js

@@ -22,6 +22,7 @@ with a trailing accessory view of a chevron down icon.
 */
 
 import ChevronDownIconSm from "../../bpk-component-icon/sm/chevron-down";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,6 +37,7 @@ const BpkDropdownChip = ({
   leadingAccessoryView: leadingAccessoryView,
   selected: selected,
   type: type,
+  ...getDataComponentAttribute('DropdownChip'),
   ...rest,
   trailingAccessoryView: /*#__PURE__*/_jsx(ChevronDownIconSm, {})
 });

package/bpk-component-chip/src/BpkIconChip.js

@@ -22,9 +22,11 @@ been hard coded to have no text or trailing icon and padding/margin
 to match.
 */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkIconChip = props => /*#__PURE__*/_jsx(BpkSelectableChip, {
+  ...getDataComponentAttribute('IconChip'),
   ...props,
   children: null
 });

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -17,7 +17,7 @@
  */
 
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,6 +39,7 @@ const BpkSelectableChip = ({
   return /*#__PURE__*/_jsxs("button", {
     "aria-checked": role === 'button' || role === 'tab' ? undefined : selected,
     className: classNames,
+    ...getDataComponentAttribute('SelectableChip'),
     disabled: disabled,
     role: role,
     title: accessibilityLabel,

package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.js

@@ -22,7 +22,7 @@ import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CH
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkStickyChip from "./BpkStickyChip";
 import Nudger, { POSITION } from "./Nudger";
 import STYLES from "./BpkChipGroup.module.css";
@@ -164,6 +164,7 @@ const WrapChipGroup = ({
 });
 const BpkMultiSelectChipGroup = props => /*#__PURE__*/_jsx("div", {
   className: getClassName('bpk-chip-group-container'),
+  ...getDataComponentAttribute('MultiSelectChipGroup'),
   children: props.type === CHIP_GROUP_TYPES.rail ? /*#__PURE__*/_jsx(RailChipGroup, {
     ...props
   }) : /*#__PURE__*/_jsx(WrapChipGroup, {

package/bpk-component-chip-group/src/BpkStickyChip.js

@@ -25,7 +25,7 @@ import { useEffect, useState } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import BpkSelectableChip from "../../bpk-component-chip";
 import FilterIconSm from "../../bpk-component-icon/sm/filter";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkStickyChip.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -52,6 +52,7 @@ const BpkStickyChip = ({
   const containerClassNames = getClassName('bpk-sticky-chip-container', `bpk-sticky-chip-container--${chipStyle}`);
   return /*#__PURE__*/_jsx("div", {
     className: containerClassNames,
+    ...getDataComponentAttribute('StickyChip'),
     children: /*#__PURE__*/_jsx(BpkBreakpoint, {
       query: BREAKPOINTS.ABOVE_TABLET,
       children: isDesktop => {

package/bpk-component-content-cards/src/BpkContentCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-content-card--link{color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media(max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media(max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media(max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media(max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media(max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#626971;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}
+.bpk-content-card--link{position:relative;display:block;border-radius:.75rem;color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--link:focus{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media(max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media(max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media(max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media(max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media(max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#626971;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -23,10 +23,9 @@ type EventHandlers = {
     onTouchEnd?: (event: UIEvent) => void;
     onKeyDown?: (event: UIEvent) => void;
     onKeyUp?: (event: UIEvent) => void;
-    readOnly?: string;
-    'aria-readonly'?: boolean;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 };
-type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
+type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'inputMode'>;
 declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: ComponentType<P>) => {
     new (props: P & WithOpenEventsProps & InputProps): {
         focusCanOpen: boolean;
@@ -35,25 +34,25 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         handleBlur: () => void;
         render(): ReactElement;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
+        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: {

package/bpk-component-input/src/withOpenEvents.js

@@ -105,9 +105,9 @@ const withOpenEvents = WithOpenEventsInputComponent => {
         onKeyDown: withEventHandler(handleKeyEvent(onOpen), onKeyDown)
       };
       if (hasTouchSupport) {
-        // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
-        eventHandlers.readOnly = 'readOnly';
-        eventHandlers['aria-readonly'] = false;
+        // Prevents the mobile keyboard from opening (iOS / Android) using inputMode="none"
+        // This avoids WCAG 1.3.1 violation from conflicting readonly + aria-readonly attributes
+        eventHandlers.inputMode = 'none';
         eventHandlers.onTouchEnd = withEventHandler(this.handleTouchEnd, onTouchEnd);
       }
 

package/bpk-component-map/src/BpkBasicMapMarker.js

@@ -17,6 +17,8 @@
  */
 
 import PropTypes from 'prop-types';
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkOverlayView from "./BpkOverlayView";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -35,6 +37,7 @@ const BpkBasicMapMarker = props => {
   return /*#__PURE__*/_jsx(BpkOverlayView, {
     position: position,
     getPixelPositionOffset: getPixelPositionOffset,
+    ...getDataComponentAttribute('BasicMapMarker'),
     ...rest,
     children: children
   });

package/bpk-component-map/src/BpkPriceMarker.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBasicMapMarker from "./BpkBasicMapMarker";
 import BpkPriceMarkerButton, { MARKER_STATUSES } from "./BpkPriceMarkerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,6 +43,7 @@ const BpkPriceMarker = props => {
   return /*#__PURE__*/_jsx(BpkBasicMapMarker, {
     position: position,
     "aria-label": accessibilityLabel,
+    ...getDataComponentAttribute('PriceMarker'),
     ...rest,
     children: /*#__PURE__*/_jsx(BpkPriceMarkerButton, {
       ...allButtonProps

package/bpk-component-nudger/src/BpkNudger.js

@@ -110,7 +110,7 @@ const BpkNudger = ({
           inputRef.current && setNativeValue(inputRef.current, newValue);
         },
         disabled: minButtonDisabled,
-        title: decreaseButtonLabel,
+        "aria-label": decreaseButtonLabel,
         "aria-controls": id,
         children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
       }), /*#__PURE__*/_jsx("input", {
@@ -151,7 +151,7 @@ const BpkNudger = ({
           inputRef.current && setNativeValue(inputRef.current, newValue);
         },
         disabled: maxButtonDisabled,
-        title: increaseButtonLabel,
+        "aria-label": increaseButtonLabel,
         "aria-controls": id,
         children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
       })]

package/bpk-component-panel/index.d.ts

@@ -1,2 +1,4 @@
 import BpkPanel from './src/BpkPanel';
+export type { PanelBgColor } from './src/BpkPanel';
+export { PANEL_BG_COLORS } from './src/BpkPanel';
 export default BpkPanel;

package/bpk-component-panel/index.js

@@ -17,4 +17,5 @@
  */
 
 import BpkPanel from "./src/BpkPanel";
+export { PANEL_BG_COLORS } from "./src/BpkPanel";
 export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.d.ts

@@ -1,11 +1,24 @@
 import type { ReactNode } from 'react';
+import type { SurfaceBgColor } from '../../bpk-react-utils';
+export declare const PANEL_BG_COLORS: {
+    readonly surfaceDefault: "surface-default";
+    readonly surfaceElevated: "surface-elevated";
+    readonly surfaceHero: "surface-hero";
+    readonly surfaceContrast: "surface-contrast";
+    readonly surfaceHighlight: "surface-highlight";
+    readonly surfaceSubtle: "surface-subtle";
+    readonly surfaceLowContrast: "surface-low-contrast";
+    readonly surfaceTint: "surface-tint";
+};
+export type PanelBgColor = SurfaceBgColor;
 export type Props = {
     children: ReactNode;
+    bgColor?: PanelBgColor;
     padded?: boolean;
     fullWidth?: boolean;
     className?: string | null;
     keyline?: boolean;
     [rest: string]: any;
 };
-declare const BpkPanel: ({ children, className, fullWidth, keyline, padded, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkPanel: ({ bgColor, children, className, fullWidth, keyline, padded, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.js

@@ -16,11 +16,13 @@
  * limitations under the License.
  */
 
-import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute, SURFACE_COLORS } from "../../bpk-react-utils";
 import STYLES from "./BpkPanel.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+export const PANEL_BG_COLORS = SURFACE_COLORS;
 const BpkPanel = ({
+  bgColor = PANEL_BG_COLORS.surfaceDefault,
   children,
   className = null,
   fullWidth = false,
@@ -42,6 +44,7 @@ const BpkPanel = ({
       classNames.push(getClassName('bpk-panel--keyline'));
     }
   }
+  classNames.push(getClassName(`bpk-panel--${bgColor}`));
   if (className) {
     classNames.push(className);
   }

package/bpk-component-panel/src/BpkPanel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-panel{display:block;background-color:#fff;border-radius:.75rem}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0}.bpk-panel--keyline{box-shadow:0 0 0 1px #c1c7cf inset}.bpk-panel--full-width-keyline{box-shadow:#c1c7cf 0 -0.0625rem 0 0 inset,#c1c7cf 0 .0625rem 0 0 inset}
+.bpk-panel{display:block;background-color:#fff;border-radius:.75rem}.bpk-panel--surface-default{background-color:#fff}.bpk-panel--surface-elevated{background-color:#fff}.bpk-panel--surface-hero{background-color:#0062e3}.bpk-panel--surface-contrast{background-color:#05203c}.bpk-panel--surface-highlight{background-color:#e0e4e9}.bpk-panel--surface-subtle{background-color:#e3f0ff}.bpk-panel--surface-low-contrast{background-color:#f5f7fa}.bpk-panel--surface-tint{background-color:hsla(0,0%,100%,.1)}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0}.bpk-panel--keyline{box-shadow:0 0 0 1px #c1c7cf inset}.bpk-panel--full-width-keyline{box-shadow:#c1c7cf 0 -0.0625rem 0 0 inset,#c1c7cf 0 .0625rem 0 0 inset}

package/bpk-component-price-range/src/BpkPriceMarker.js

@@ -18,7 +18,7 @@
 
 import { forwardRef } from 'react';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkPriceMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -28,6 +28,7 @@ const BpkPriceMarker = ({
 }, ref) => /*#__PURE__*/_jsxs("div", {
   className: getClassName('bpk-price-marker', `bpk-price-marker--${type}`),
   ref: ref,
+  ...getDataComponentAttribute('PriceMarker'),
   children: [/*#__PURE__*/_jsx(BpkText, {
     textStyle: TEXT_STYLES.label2,
     children: priceLabel

package/bpk-component-price-range/src/BpkPriceRange.js

@@ -19,7 +19,7 @@
 import { useEffect, useRef, useState } from 'react';
 import clamp from 'lodash/clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkPriceMarker from "./BpkPriceMarker";
 import { MARKER_DISPLAY_TYPES, MARKER_TYPES } from "./common-types";
 import STYLES from "./BpkPriceRange.module.css";
@@ -102,6 +102,7 @@ const BpkPriceRange = ({
     },
     className: getClassName('bpk-price-range', shouldShowPriceOnBoundaries && 'bpk-price-range--large'),
     ref: linesRef,
+    ...getDataComponentAttribute('PriceRange'),
     children: [shouldShowBubble && /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-price-range__marker'),
       children: /*#__PURE__*/_jsx(BpkPriceMarker, {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -18,7 +18,7 @@
 
 import { BpkCalendarGrid } from "../../bpk-component-calendar";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkScrollableCalendarGrid.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,6 +32,7 @@ const BpkScrollableCalendarGrid = ({
   const classNames = getClassName('bpk-scrollable-calendar-grid', className);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
+    ...getDataComponentAttribute('ScrollableCalendarGrid'),
     children: [/*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
       children: /*#__PURE__*/_jsx(BpkText, {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -21,7 +21,7 @@ import { startOfDay, startOfMonth } from 'date-fns';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
@@ -102,6 +102,7 @@ const BpkScrollableCalendarGridList = props => {
   const selectedDate = focusedDate || date;
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
+    ...getDataComponentAttribute('ScrollableCalendarGridList'),
     children: /*#__PURE__*/_jsx(AutoSizer, {
       onResize: onResize,
       defaultHeight: estimatedMonthItemHeight,

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -25,7 +25,7 @@ The actual component that developers create (i.e. the default export from this p
 import { cloneElement, useRef, useState, useEffect } from 'react';
 import { arrow, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useFloating, useFocus, useHover, useInteractions, useRole } from '@floating-ui/react';
 import { surfaceHighlightDay, onePixelRem } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { TransitionInitialMount, cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -118,6 +118,7 @@ const BpkTooltip = ({
             tabIndex: -1,
             role: "dialog",
             className: classNames,
+            ...getDataComponentAttribute('Tooltip'),
             ...rest,
             children: [/*#__PURE__*/_jsx(FloatingArrow, {
               ref: arrowRef,

package/bpk-mixins/_index.scss

@@ -32,6 +32,7 @@
 @forward 'scroll-indicators';
 @forward 'shadows';
 @forward 'spinners';
+@forward 'surfaces';
 @forward 'typography';
 @forward 'utils';