@skyscanner/backpack-web 41.11.1 → 41.13.0

package/bpk-component-card-list/src/BpkCardList.js

@@ -38,6 +38,7 @@ const BpkCardList = props => {
     chipGroup,
     description,
     expandText,
+    initiallyInViewCardIndex = 0,
     initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
     initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
     layoutDesktop,
@@ -78,6 +79,7 @@ const BpkCardList = props => {
               initiallyShownCards: initiallyShownCardsMobile,
               layout: layoutMobile,
               accessibilityLabels: accessibilityLabels,
+              initiallyInViewCardIndex: initiallyInViewCardIndex,
               isMobile: true,
               children: cardList
             }), layoutMobile === LAYOUTS.stack && /*#__PURE__*/_jsx(BpkCardListGridStack, {
@@ -97,6 +99,7 @@ const BpkCardList = props => {
               initiallyShownCards: initiallyShownCardsDesktop,
               layout: layoutDesktop,
               accessibilityLabels: accessibilityLabels,
+              initiallyInViewCardIndex: initiallyInViewCardIndex,
               children: cardList
             }), layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination && /*#__PURE__*/_jsx(BpkCardListGridStack, {
               accessory: accessoryDesktop,

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

@@ -20,7 +20,7 @@ import { useRef, useState, useEffect, isValidElement, Children, useMemo } from '
 import throttle from 'lodash/throttle';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { RENDER_BUFFER_SIZE } from "./constants";
-import { lockScroll, setA11yTabIndex, useScrollToCard, useIntersectionObserver } from "./utils";
+import { setA11yTabIndex, useIntersectionObserver, usePageScrollSync } from "./utils";
 import STYLES from "./BpkCardListCarousel.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -30,6 +30,7 @@ const BpkCardListCarousel = props => {
     carouselLabel = (initiallyShownCards, childrenLength) => `Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
     children,
     currentIndex,
+    initialPageIndex,
     initiallyShownCards,
     isMobile = false,
     layout,
@@ -47,13 +48,20 @@ const BpkCardListCarousel = props => {
   const firstCardWidthRef = useRef(null);
   const firstCardHeightRef = useRef(null);
   const [visibilityList, setVisibilityList] = useState(Array(childrenLength).fill(0));
-  const stateScrollingLockRef = useRef(false);
-  const openSetStateLockTimeoutRef = useRef(null);
   const observerVisibility = useIntersectionObserver({
     root,
     threshold: 0.5
   }, setVisibilityList);
-  useScrollToCard(currentIndex * initiallyShownCards, root, cardRefs, stateScrollingLockRef);
+  usePageScrollSync({
+    currentIndex,
+    setCurrentIndex,
+    initiallyShownCards,
+    cardRefs,
+    visibilityList,
+    container: root,
+    enabled: !isMobile,
+    initialPageIndex
+  });
 
   // Similar to Virtual Scrolling to improve performance
   const firstVisibleIndex = Math.max(0, visibilityList.indexOf(1));
@@ -87,22 +95,6 @@ const BpkCardListCarousel = props => {
       }
     }
   }), [childrenLength, observerVisibility, visibilityList, firstCardWidthRef, firstCardHeightRef]);
-  useEffect(() => {
-    const container = root;
-    if (isMobile || !container) return undefined;
-    const lockScrollDuringInteraction = () => {
-      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef);
-    };
-    container.addEventListener('wheel', lockScrollDuringInteraction);
-    container.addEventListener('touchmove', lockScrollDuringInteraction);
-    return () => {
-      container.removeEventListener('touchmove', lockScrollDuringInteraction);
-      container.removeEventListener('wheel', lockScrollDuringInteraction);
-      if (openSetStateLockTimeoutRef.current) {
-        clearTimeout(openSetStateLockTimeoutRef.current);
-      }
-    };
-  }, [root]);
   useEffect(() => {
     // update hasBeenVisibleRef to include the range of cards that should be visible
     const start = currentIndex * initiallyShownCards;
@@ -111,15 +103,6 @@ const BpkCardListCarousel = props => {
       hasBeenVisibleRef.current.add(i);
     }
   }, [currentIndex, initiallyShownCards, childrenLength, dynamicRenderBufferSize]);
-  useEffect(() => {
-    const firstVisible = visibilityList.indexOf(1);
-    if (firstVisible >= 0) {
-      const newIndex = Math.floor(firstVisible / initiallyShownCards);
-      if (newIndex !== currentIndex) {
-        setCurrentIndex(newIndex);
-      }
-    }
-  }, [initiallyShownCards]);
   useEffect(() => {
     const handleResize = throttle(() => {
       firstCardWidthRef.current = null;
@@ -149,8 +132,9 @@ const BpkCardListCarousel = props => {
       if (firstCardHeightRef.current) {
         cardDimensionStyle.height = `${firstCardHeightRef.current}px`;
       }
+      const isPageStart = index % initiallyShownCards === 0;
       const commonProps = {
-        className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
+        className: getClassName(`bpk-card-list-row-rail__${layout}__card`, isPageStart && 'bpk-card-list-row-rail__card--page-start'),
         style: shownNumberStyle,
         key: `carousel-card-${index.toString()}`,
         role: 'group'
@@ -161,6 +145,7 @@ const BpkCardListCarousel = props => {
       if (!shouldRenderCard) {
         return /*#__PURE__*/_jsx("div", {
           ...commonProps,
+          ref: cardRefFns[index],
           style: {
             ...commonProps.style,
             ...cardDimensionStyle,

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:hidden;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}.bpk-card-list-row-rail__card-slot{display:grid;height:100%}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:scroll;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;-webkit-overflow-scrolling:touch;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(min-width: 32.0625rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{scroll-snap-align:none}}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}@media(min-width: 32.0625rem){.bpk-card-list-row-rail__card--page-start{scroll-snap-align:start;scroll-snap-stop:always}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}.bpk-card-list-row-rail__card-slot{display:grid;height:100%}

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

@@ -28,6 +28,7 @@ const BpkCardListRowRailContainer = props => {
     accessibilityLabels,
     accessory,
     children,
+    initiallyInViewCardIndex,
     initiallyShownCards,
     isMobile = false,
     layout
@@ -35,7 +36,18 @@ const BpkCardListRowRailContainer = props => {
   const childrenCount = Children.count(children);
   const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
   const showAccessory = childrenCount > initiallyShownCards;
-  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Calculate initial page from card index
+  const [initialPageIndex] = useState(() => {
+    if (initiallyInViewCardIndex < 0) {
+      return 0;
+    }
+    if (initiallyInViewCardIndex >= childrenCount) {
+      return Math.max(0, totalIndicators - 1);
+    }
+    return Math.floor(initiallyInViewCardIndex / initiallyShownCards);
+  });
+  const [currentIndex, setCurrentIndex] = useState(initialPageIndex);
   const accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
     currentIndex: currentIndex,
     totalIndicators: totalIndicators,
@@ -57,6 +69,7 @@ const BpkCardListRowRailContainer = props => {
       isMobile: isMobile,
       carouselLabel: accessibilityLabels?.carouselLabel,
       slideLabel: accessibilityLabels?.slideLabel,
+      initialPageIndex: initialPageIndex,
       children: children
     }), accessoryContent && showAccessory && /*#__PURE__*/_jsx("div", {
       role: "region",

package/bpk-component-card-list/src/BpkCardListRowRail/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const RELEASE_LOCK_DELAY = 20;
+export declare const RELEASE_LOCK_DELAY = 200;
 export declare const RENDER_BUFFER_SIZE = 3;

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

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-export const RELEASE_LOCK_DELAY = 20;
+export const RELEASE_LOCK_DELAY = 200;
 export const RENDER_BUFFER_SIZE = 3;

package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts

@@ -1,9 +1,4 @@
-/**
- * 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 declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
+import type { Dispatch, SetStateAction, RefObject } from 'react';
 /**
  * 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.
@@ -11,5 +6,27 @@ export declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<
  * @param index - Current container index
  */
 export declare const setA11yTabIndex: (el: HTMLDivElement | null, index: number, visibilityList: number[]) => void;
-export declare const useScrollToCard: (currentIndex: number, container: HTMLElement | null, cardRefs: React.MutableRefObject<Array<HTMLDivElement | null>>, stateScrollingLockRef: React.MutableRefObject<boolean>) => void;
-export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;
+export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: Dispatch<SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;
+type UsePageScrollSyncOptions = {
+    currentIndex: number;
+    setCurrentIndex: Dispatch<SetStateAction<number>>;
+    initiallyShownCards: number;
+    cardRefs: RefObject<Array<HTMLDivElement | null>>;
+    visibilityList: number[];
+    container: HTMLElement | null;
+    enabled: boolean;
+    initialPageIndex: number;
+};
+/**
+ * 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 declare const usePageScrollSync: ({ cardRefs, container, currentIndex, enabled, initialPageIndex, initiallyShownCards, setCurrentIndex, visibilityList, }: UsePageScrollSyncOptions) => void;
+export {};

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-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-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-mixins/_index.scss

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

package/bpk-mixins/_surfaces.scss

@@ -0,0 +1,52 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens';
+
+////
+/// @group surfaces
+////
+
+// Keys must stay in sync with bpk-react-utils/src/surfaceColors.ts
+$bpk-surface-bg-colors: (
+  'surface-default': tokens.$bpk-surface-default-day,
+  'surface-elevated': tokens.$bpk-surface-elevated-day,
+  'surface-hero': tokens.$bpk-surface-hero-day,
+  'surface-contrast': tokens.$bpk-surface-contrast-day,
+  'surface-highlight': tokens.$bpk-surface-highlight-day,
+  'surface-subtle': tokens.$bpk-surface-subtle-day,
+  'surface-low-contrast': tokens.$bpk-surface-low-contrast-day,
+  'surface-tint': tokens.$bpk-surface-tint-day,
+);
+
+/// Generates background-color modifier classes for all surface colors.
+///
+/// @example scss
+///   .bpk-panel {
+///     @include bpk-surface-bg-colors;
+///   }
+
+@mixin bpk-surface-bg-colors {
+  @each $color-name, $color-value in $bpk-surface-bg-colors {
+    &--#{$color-name} {
+      background-color: $color-value;
+    }
+  }
+}

package/bpk-react-utils/index.d.ts

@@ -7,9 +7,11 @@ import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection
 import { getDataComponentAttribute } from './src/getDataComponentAttribute';
 import isRTL from './src/isRTL';
 import { setNativeValue } from './src/nativeEventHandler';
+import { SURFACE_COLORS } from './src/surfaceColors';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, };
+export type { SurfaceBgColor } from './src/surfaceColors';
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS, };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -43,5 +45,15 @@ declare const _default: {
     getDataComponentAttribute: (componentName: string) => {
         "data-backpack-ds-component": string;
     };
+    SURFACE_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 default _default;

package/bpk-react-utils/index.js

@@ -26,9 +26,10 @@ import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection
 import { getDataComponentAttribute } from "./src/getDataComponentAttribute";
 import isRTL from "./src/isRTL";
 import { setNativeValue } from "./src/nativeEventHandler";
+import { SURFACE_COLORS } from "./src/surfaceColors";
 import withDefaultProps from "./src/withDefaultProps";
 import wrapDisplayName from "./src/wrapDisplayName";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS };
 export default {
   Portal,
   TransitionInitialMount,
@@ -42,5 +43,6 @@ export default {
   isRTL,
   BpkDialogWrapper,
   setNativeValue,
-  getDataComponentAttribute
+  getDataComponentAttribute,
+  SURFACE_COLORS
 };

package/bpk-react-utils/src/surfaceColors.d.ts

@@ -0,0 +1,11 @@
+export declare const SURFACE_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 SurfaceBgColor = (typeof SURFACE_COLORS)[keyof typeof SURFACE_COLORS];

package/bpk-react-utils/src/surfaceColors.js

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Values must stay in sync with bpk-mixins/_surfaces.scss
+export const SURFACE_COLORS = {
+  surfaceDefault: 'surface-default',
+  surfaceElevated: 'surface-elevated',
+  surfaceHero: 'surface-hero',
+  surfaceContrast: 'surface-contrast',
+  surfaceHighlight: 'surface-highlight',
+  surfaceSubtle: 'surface-subtle',
+  surfaceLowContrast: 'surface-low-contrast',
+  surfaceTint: 'surface-tint'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.11.1",
+  "version": "41.13.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",