@skyscanner/backpack-web 41.4.0 → 41.6.0

package/bpk-component-bubble/src/BpkBubble.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}
+.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}

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{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-inline:-0.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{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;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex-basis:calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__row__card{flex-basis:calc((100% - .25rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3))}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
+.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)}}

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -19,7 +19,6 @@
 import { cloneElement } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";

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

@@ -0,0 +1,3 @@
+import BpkLabel from './src/BpkLabel';
+export type { Props as BpkLabelProps } from './src/BpkLabel';
+export default BpkLabel;

package/bpk-component-label/index.js

@@ -14,5 +14,7 @@
  * 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.
- */import BpkLabel from "./src/BpkLabel";
+ */
+
+import BpkLabel from "./src/BpkLabel";
 export default BpkLabel;

package/bpk-component-label/src/BpkLabel.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    valid?: boolean | null;
+    required?: boolean;
+    white?: boolean;
+} & ComponentPropsWithoutRef<'label'>;
+declare const BpkLabel: ({ children, className, disabled, required, valid, white, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkLabel;

package/bpk-component-label/src/BpkLabel.js

@@ -14,14 +14,15 @@
  * 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.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkLabel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkLabel = ({
   children,
-  className = null,
+  className,
   disabled = false,
   required = false,
   valid = null,
@@ -30,25 +31,13 @@ const BpkLabel = ({
 }) => {
   const invalid = valid === false;
   const classNames = getClassName('bpk-label', white && 'bpk-label--white', invalid && 'bpk-label--invalid', disabled && 'bpk-label--disabled', white && disabled && 'bpk-label--disabled--white', className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("label", {
-      className: classNames,
-      ...rest,
-      children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-label__asterisk'),
-        children: "*"
-      })]
-    })
-  );
-};
-BpkLabel.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  valid: PropTypes.bool,
-  required: PropTypes.bool,
-  white: PropTypes.bool
+  return /*#__PURE__*/_jsxs("label", {
+    className: classNames,
+    ...rest,
+    children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-label__asterisk'),
+      children: "*"
+    })]
+  });
 };
 export default BpkLabel;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js

@@ -82,6 +82,7 @@ const BpkNavigationTabGroup = ({
       children: tabs.map((tab, index) => {
         const selected = index === selectedTab;
         const {
+          badgeText,
           icon,
           text,
           ...tabWrapItem
@@ -103,10 +104,10 @@ const BpkNavigationTabGroup = ({
                 textStyle: TEXT_STYLES.label2,
                 children: text
               })]
-            }), tab.badgeText && /*#__PURE__*/_jsx("span", {
+            }), badgeText && /*#__PURE__*/_jsx("span", {
               className: getClassName('bpk-navigation-tab-bubble-wrapper'),
               children: /*#__PURE__*/_jsx(BpkBubble, {
-                children: tab.badgeText
+                children: badgeText
               })
             })]
           })

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

@@ -21,7 +21,6 @@ import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules, setNativeValue } from "../../bpk-react-utils";

package/bpk-component-segmented-control/index.d.ts

@@ -1,3 +1,4 @@
-import BpkSegmentedControl, { type Props as BpkSegmentControlProps } from './src/BpkSegmentedControl';
-export type { BpkSegmentControlProps };
+import BpkSegmentedControl, { useSegmentedControlPanels, type Props as BpkSegmentControlProps, type TabPanelProps } from './src/BpkSegmentedControl';
+export type { BpkSegmentControlProps, TabPanelProps };
+export { useSegmentedControlPanels };
 export default BpkSegmentedControl;

package/bpk-component-segmented-control/index.js

@@ -16,5 +16,6 @@
  * limitations under the License.
  */
 
-import BpkSegmentedControl from "./src/BpkSegmentedControl";
+import BpkSegmentedControl, { useSegmentedControlPanels } from "./src/BpkSegmentedControl";
+export { useSegmentedControlPanels };
 export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts

@@ -6,16 +6,51 @@ export declare const SEGMENT_TYPES: {
     SurfaceContrast: string;
 };
 export type SegmentTypes = (typeof SEGMENT_TYPES)[keyof typeof SEGMENT_TYPES];
+export type TabPanelProps = {
+    id: string;
+    role: 'tabpanel';
+    'aria-labelledby': string;
+    hidden: boolean;
+    tabIndex: 0;
+};
+/**
+ * Custom hook to manage segmented control and its panels with automatic ID generation.
+ * Simplifies the API by eliminating the need to manually track IDs.
+ *
+ * Note: For optimal performance, memoize the buttonContents array in the parent component
+ * to prevent unnecessary recalculations (e.g., using useMemo or defining outside render).
+ *
+ * @param {Array<string | ReactNode>} buttonContents - Array of button content (strings or ReactNodes)
+ * @param {number} selectedIndex - Currently selected tab index
+ * @returns {Object} Object with controlProps (for BpkSegmentedControl) and getPanelProps function
+ */
+export declare const useSegmentedControlPanels: (buttonContents: string[] | ReactNode[], selectedIndex: number) => {
+    controlProps: {
+        id: string;
+        buttonContents: string[] | ReactNode[];
+        selectedIndex: number;
+    };
+    getPanelProps: (index: number) => TabPanelProps;
+};
 export type Props = {
     buttonContents: string[] | ReactNode[];
     /**
      * Accessible label for the segmented control group.
      */
     label?: string;
+    /**
+     * ID used to link the segmented control with its tab panels for accessibility.
+     * Created using controlProps from useSegmentedControlPanels hook.
+     */
+    id?: string;
     type?: SegmentTypes;
+    /**
+     * Callback fired when a tab is selected. Receives the index of the selected tab.
+     */
     onItemClick: (id: number) => void;
     selectedIndex: number;
     shadow?: boolean;
+    activationMode?: 'automatic' | 'manual';
 };
-declare const BpkSegmentedControl: ({ buttonContents, label, onItemClick, selectedIndex, shadow, type, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControl: ({ activationMode, buttonContents, id: providedId, label, onItemClick, selectedIndex, shadow, type, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { useId, useMemo, useRef, useState } from 'react';
+import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSegmentedControl.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,40 +27,165 @@ export const SEGMENT_TYPES = {
   SurfaceDefault: 'surface-default',
   SurfaceContrast: 'surface-contrast'
 };
+const getPanelId = (baseId, index) => `${baseId}-panel-${index}`;
+const getTabId = (baseId, index) => `${baseId}-tab-${index}`;
+
+/**
+ * Helper function to get accessibility props for tab panel elements.
+ * Use this to ensure proper ARIA relationships between tabs and their panels.
+ *
+ * Note: For a simpler API, consider using the useSegmentedControlPanels hook instead,
+ * which manages IDs automatically and reduces boilerplate.
+ * This function is kept for backward compatibility.
+ *
+ * @param {string} baseId - The base ID used to generate unique IDs for tabs and panels.
+ * @param {number} index - The index of the tab panel.
+ * @param {number} selectedIndex - The currently selected tab index.
+ * @returns {TabPanelProps} An object containing the necessary props for a tab panel.
+ */
+const getTabPanelProps = (baseId, index, selectedIndex) => ({
+  id: getPanelId(baseId, index),
+  role: 'tabpanel',
+  'aria-labelledby': getTabId(baseId, index),
+  hidden: index !== selectedIndex,
+  tabIndex: 0
+});
+const getContainerAriaProps = (providedId, label) => {
+  const props = {};
+  if (providedId) {
+    props.role = 'tablist';
+    props['aria-orientation'] = 'horizontal';
+  }
+  if (label) {
+    props['aria-label'] = label;
+  }
+  return props;
+};
+const getButtonAriaProps = (providedId, isSelected, panelId) => {
+  if (!providedId) {
+    return {};
+  }
+  return {
+    role: 'tab',
+    'aria-selected': isSelected,
+    'aria-controls': panelId
+  };
+};
+const getTabIndex = (providedId, isSelected) => {
+  if (!providedId) {
+    return undefined;
+  }
+  return isSelected ? 0 : -1;
+};
+const getNextIndex = (current, max) => current === max ? 0 : current + 1;
+const getPrevIndex = (current, max) => current === 0 ? max : current - 1;
+
+/**
+ * Custom hook to manage segmented control and its panels with automatic ID generation.
+ * Simplifies the API by eliminating the need to manually track IDs.
+ *
+ * Note: For optimal performance, memoize the buttonContents array in the parent component
+ * to prevent unnecessary recalculations (e.g., using useMemo or defining outside render).
+ *
+ * @param {Array<string | ReactNode>} buttonContents - Array of button content (strings or ReactNodes)
+ * @param {number} selectedIndex - Currently selected tab index
+ * @returns {Object} Object with controlProps (for BpkSegmentedControl) and getPanelProps function
+ */
+export const useSegmentedControlPanels = (buttonContents, selectedIndex) => {
+  const baseId = useId();
+  const controlProps = useMemo(() => ({
+    id: baseId,
+    buttonContents,
+    selectedIndex
+  }), [baseId, buttonContents, selectedIndex]);
+  const getPanelProps = useMemo(() => index => getTabPanelProps(baseId, index, selectedIndex), [baseId, selectedIndex]);
+  return {
+    controlProps,
+    getPanelProps
+  };
+};
 const BpkSegmentedControl = ({
+  activationMode = 'automatic',
   buttonContents,
+  id: providedId,
   label,
   onItemClick,
   selectedIndex,
   shadow = false,
   type = SEGMENT_TYPES.CanvasDefault
 }) => {
+  const buttonRefs = useRef([]);
+  const panelIds = useMemo(() => Array.from({
+    length: buttonContents.length
+  }, (_, i) => providedId ? getPanelId(providedId, i) : undefined), [providedId, buttonContents.length]);
+
+  // TODO: Consider removing internal state - component is controlled via selectedIndex prop.
+  // Internal state may cause sync issues if selectedIndex changes externally.
   const [selectedButton, setSelectedButton] = useState(selectedIndex);
-  const handleButtonClick = id => {
-    if (id !== selectedButton) {
-      setSelectedButton(id);
-      onItemClick(id);
+  const handleButtonClick = index => {
+    if (index !== selectedButton) {
+      setSelectedButton(index);
+      onItemClick(index);
+    }
+  };
+  const handleKeyDown = (event, currentIndex) => {
+    const lastIndex = buttonContents.length - 1;
+    const rtl = isRTL();
+    let newIndex = currentIndex;
+    switch (event.key) {
+      case 'ArrowRight':
+        newIndex = rtl ? getPrevIndex(currentIndex, lastIndex) : getNextIndex(currentIndex, lastIndex);
+        break;
+      case 'ArrowLeft':
+        newIndex = rtl ? getNextIndex(currentIndex, lastIndex) : getPrevIndex(currentIndex, lastIndex);
+        break;
+      case 'Home':
+        newIndex = 0;
+        break;
+      case 'End':
+        newIndex = lastIndex;
+        break;
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        if (activationMode === 'manual') {
+          setSelectedButton(currentIndex);
+          onItemClick(currentIndex);
+        }
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (activationMode === 'automatic') {
+      setSelectedButton(newIndex);
+      onItemClick(newIndex);
     }
+    buttonRefs.current[newIndex]?.focus();
   };
   const containerStyling = getClassName('bpk-segmented-control-group', shadow && 'bpk-segmented-control-group-shadow');
   return /*#__PURE__*/_jsx("div", {
     className: containerStyling,
-    role: "group",
-    ...(label ? {
-      'aria-label': label
-    } : {}),
+    ...getContainerAriaProps(providedId, label),
     children: buttonContents.map((content, index) => {
       const isSelected = index === selectedButton;
       const rightOfOption = index === selectedButton + 1;
       const buttonStyling = getClassName('bpk-segmented-control', `bpk-segmented-control--${type}`, isSelected && `bpk-segmented-control--${type}-selected`, rightOfOption && `bpk-segmented-control--${type}-rightOfOption`, shadow && isSelected && `bpk-segmented-control--${type}-selected-shadow`);
+      const buttonTabId = providedId ? getTabId(providedId, index) : undefined;
+      const tabIndexValue = getTabIndex(providedId, isSelected);
       return /*#__PURE__*/_jsx("button", {
-        id: index.toString(),
+        ref: el => {
+          buttonRefs.current[index] = el;
+        },
+        id: buttonTabId,
         type: "button",
         onClick: () => handleButtonClick(index),
+        onKeyDown: event => handleKeyDown(event, index),
         className: buttonStyling,
-        "aria-pressed": !!isSelected,
+        tabIndex: tabIndexValue,
+        ...getButtonAriaProps(providedId, isSelected, panelIds[index]),
         children: content
-      }, `index-${index.toString()}`);
+      }, buttonTabId || `${index}`);
     })
   });
 };

package/bpk-component-slider/src/BpkSlider.js

@@ -15,13 +15,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect, useCallback } from 'react';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as Slider from '@radix-ui/react-slider';
 import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+
+// Pure utility function to normalize slider values for callbacks
+// Returns single number for single-thumb slider, array for range slider
+const processSliderValues = (sliderValues, callback) => {
+  const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+  if (callback) {
+    callback(val);
+  }
+};
 const BpkSlider = ({
   ariaLabel,
   ariaValuetext,
@@ -37,19 +46,72 @@ const BpkSlider = ({
 }) => {
   const invert = isRTL();
   const currentValue = Array.isArray(value) ? value : [value];
-  const processSliderValues = (sliderValues, callback) => {
-    const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
-    if (callback) {
-      callback(val);
+
+  // Track the latest value and callback for the Chrome workaround
+  // Using refs to avoid re-registering document event listeners when these change
+  const latestValueRef = useRef(currentValue);
+  const onAfterChangeRef = useRef(onAfterChange);
+  const isDraggingRef = useRef(false);
+  const hasCommittedRef = useRef(false);
+  // Store cleanup function to prevent memory leaks if component unmounts during drag
+  const cleanupRef = useRef(null);
+
+  // Keep refs updated
+  useEffect(() => {
+    latestValueRef.current = currentValue;
+  }, [currentValue]);
+  useEffect(() => {
+    onAfterChangeRef.current = onAfterChange;
+  }, [onAfterChange]);
+
+  // Cleanup on unmount to prevent memory leaks
+  useEffect(() => () => {
+    if (cleanupRef.current) {
+      cleanupRef.current();
     }
-  };
+  }, []);
   const thumbRefs = [useRef(null), useRef(null)];
-  const handleOnChange = sliderValues => {
+  const handleOnChange = useCallback(sliderValues => {
+    latestValueRef.current = sliderValues;
     processSliderValues(sliderValues, onChange);
-  };
-  const handleOnAfterChange = sliderValues => {
+  }, [onChange]);
+  const handleOnAfterChange = useCallback(sliderValues => {
+    hasCommittedRef.current = true;
+    isDraggingRef.current = false;
     processSliderValues(sliderValues, onAfterChange);
-  };
+  }, [onAfterChange]);
+
+  // Chrome workaround: Listen for pointerup/pointercancel on document as safety net
+  // This ensures onAfterChange fires even when Radix's onValueCommit doesn't
+  // See: https://github.com/radix-ui/primitives/issues/1760
+  const handlePointerDown = useCallback(() => {
+    // Clean up any previous listener still hanging around (edge case)
+    if (cleanupRef.current) {
+      cleanupRef.current();
+    }
+    isDraggingRef.current = true;
+    hasCommittedRef.current = false;
+    const handlePointerEnd = () => {
+      document.removeEventListener('pointerup', handlePointerEnd);
+      document.removeEventListener('pointercancel', handlePointerEnd);
+      cleanupRef.current = null;
+
+      // Use requestAnimationFrame to defer the check, allowing Radix's onValueCommit
+      // to fire first and set hasCommittedRef.current = true. This prevents the race
+      // condition where both handlers could fire onAfterChange for the same interaction.
+      requestAnimationFrame(() => {
+        if (isDraggingRef.current && !hasCommittedRef.current && onAfterChangeRef.current) {
+          // Radix didn't fire onValueCommit, so we fire it manually
+          processSliderValues(latestValueRef.current, onAfterChangeRef.current);
+        }
+        isDraggingRef.current = false;
+        hasCommittedRef.current = false;
+      });
+    };
+    cleanupRef.current = handlePointerEnd;
+    document.addEventListener('pointerup', handlePointerEnd);
+    document.addEventListener('pointercancel', handlePointerEnd);
+  }, []);
   return /*#__PURE__*/_jsxs(Slider.Root, {
     className: getClassName('bpk-slider'),
     defaultValue: currentValue,
@@ -58,6 +120,7 @@ const BpkSlider = ({
     step: step || 1,
     onValueChange: handleOnChange,
     onValueCommit: handleOnAfterChange,
+    onPointerDown: handlePointerDown,
     inverted: invert,
     minStepsBetweenThumbs: minDistance,
     ...rest,

package/bpk-component-text/src/BpkText.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}
+.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -17,8 +17,6 @@
  */
 
 import { Component } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";

package/bpk-mixins/_typography.scss

@@ -506,7 +506,7 @@
 ///   }
 
 @mixin bpk-editorial-1 {
-  font-family: tokens.$bpk-font-family-larken;
+  font-family: var(--bpk-larken-font-stack, tokens.$bpk-font-family-larken);
 
   @include _bpk-text-factory(
     tokens.$bpk-font-size-xxxxl,
@@ -523,7 +523,7 @@
 ///   }
 
 @mixin bpk-editorial-2 {
-  font-family: tokens.$bpk-font-family-larken;
+  font-family: var(--bpk-larken-font-stack, tokens.$bpk-font-family-larken);
 
   @include _bpk-text-factory(
     tokens.$bpk-font-size-xxl,
@@ -540,7 +540,7 @@
 ///   }
 
 @mixin bpk-editorial-3 {
-  font-family: tokens.$bpk-font-family-larken;
+  font-family: var(--bpk-larken-font-stack, tokens.$bpk-font-family-larken);
 
   @include _bpk-text-factory(
     tokens.$bpk-font-size-lg,

package/bpk-stylesheets/base.css

@@ -16,4 +16,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack, "Skyscanner Relative", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Thai", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}