@skyscanner/backpack-web 42.11.0 → 42.13.0

package/bpk-component-comparison-table/index.d.ts

@@ -1,3 +1,6 @@
+import BpkComparisonTable from './src/BpkComparisonTable/BpkComparisonTable';
 import BpkComparisonTray from './src/BpkComparisonTray/BpkComparisonTray';
 export type { BpkComparisonItem, BpkComparisonTrayRootProps, BpkComparisonTrayItemProps, BpkComparisonTrayNamespace, } from './src/BpkComparisonTray/common-types';
-export default BpkComparisonTray;
+export type { BpkCompareRow, BpkCompareColumn, BpkComparisonTableRootProps, BpkComparisonTableStrings, BpkComparisonTableNamespace, } from './src/BpkComparisonTable/common-types';
+export { BpkComparisonTray };
+export default BpkComparisonTable;

package/bpk-component-comparison-table/index.js

@@ -16,5 +16,7 @@
  * limitations under the License.
  */
 
+import BpkComparisonTable from "./src/BpkComparisonTable/BpkComparisonTable";
 import BpkComparisonTray from "./src/BpkComparisonTray/BpkComparisonTray";
-export default BpkComparisonTray;
+export { BpkComparisonTray };
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.d.ts

@@ -0,0 +1,17 @@
+import type { BpkComparisonTableNamespace } from './common-types';
+/**
+ * BpkComparisonTable — side-by-side comparison modal.
+ *
+ * @example
+ * <BpkComparisonTable.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BpkComparisonTable.Header title="Compare cars" strings={strings} />
+ *   <BpkComparisonTable.Content
+ *     columns={columns}
+ *     onRemove={(itemId) => handleRemove(itemId)}
+ *     onAddMoreClick={() => setIsOpen(false)}
+ *     strings={strings}
+ *   />
+ * </BpkComparisonTable.Root>
+ */
+declare const BpkComparisonTable: BpkComparisonTableNamespace;
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.js

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+import BpkComparisonTableContent from "./BpkComparisonTableContent";
+import BpkComparisonTableHeader from "./BpkComparisonTableHeader";
+import BpkComparisonTableRoot from "./BpkComparisonTableRoot";
+/**
+ * BpkComparisonTable — side-by-side comparison modal.
+ *
+ * @example
+ * <BpkComparisonTable.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BpkComparisonTable.Header title="Compare cars" strings={strings} />
+ *   <BpkComparisonTable.Content
+ *     columns={columns}
+ *     onRemove={(itemId) => handleRemove(itemId)}
+ *     onAddMoreClick={() => setIsOpen(false)}
+ *     strings={strings}
+ *   />
+ * </BpkComparisonTable.Root>
+ */
+const BpkComparisonTable = {
+  Root: BpkComparisonTableRoot,
+  Header: BpkComparisonTableHeader,
+  Content: BpkComparisonTableContent
+};
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-button{opacity:var(--bpk-image-opacity, 1);overflow:clip;margin-block-start:calc(.5rem*var(--bpk-image-opacity, 1));max-block-size:calc(5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts

@@ -0,0 +1,8 @@
+import type { BpkCompareColumn } from './common-types';
+type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'itemId' | 'bestTag' | 'removeA11yLabel'> & {
+    removeLabel: string;
+    bestTagLabel: string;
+    onRemove: (itemId: string) => void;
+};
+declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, itemId, onRemove, removeA11yLabel, removeLabel, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+import BpkBadge, { BADGE_TYPES } from "../../../bpk-component-badge";
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkComparisonTableColumnHeader = ({
+  bestTag = false,
+  bestTagLabel,
+  headerContent,
+  imageAlt = '',
+  imageSrc,
+  itemId,
+  onRemove,
+  removeA11yLabel,
+  removeLabel
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-comparison-table__header-content'),
+  children: [/*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-comparison-table__header-image-wrapper'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-comparison-table__header-image-area'),
+      children: imageSrc && /*#__PURE__*/_jsx("img", {
+        src: imageSrc,
+        alt: imageAlt
+      })
+    }), bestTag && /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-comparison-table__best-tag'),
+      children: /*#__PURE__*/_jsx(BpkBadge, {
+        type: BADGE_TYPES.brand,
+        children: bestTagLabel
+      })
+    })]
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-table__header-id-section'),
+    children: headerContent
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-table__remove-button'),
+    children: /*#__PURE__*/_jsx(BpkButton, {
+      type: BUTTON_TYPES.link,
+      size: SIZE_TYPES.small,
+      onClick: () => onRemove(itemId),
+      "aria-label": removeA11yLabel,
+      children: removeLabel
+    })
+  })]
+});
+export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.d.ts

@@ -0,0 +1,7 @@
+type BpkComparisonTableColumnHeaderPlaceholderProps = {
+    addMoreDescription: string;
+    addMoreLinkText: string;
+    onAddMoreClick: () => void;
+};
+declare const BpkComparisonTableColumnHeaderPlaceholder: ({ addMoreDescription, addMoreLinkText, onAddMoreClick, }: BpkComparisonTableColumnHeaderPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableColumnHeaderPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.js

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
+import { BpkFlex, BpkSpacing } from "../../../bpk-component-layout";
+import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../../bpk-component-text";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkComparisonTableColumnHeaderPlaceholder = ({
+  addMoreDescription,
+  addMoreLinkText,
+  onAddMoreClick
+}) => /*#__PURE__*/_jsxs(BpkFlex, {
+  direction: "column",
+  align: "center",
+  gap: BpkSpacing.MD,
+  paddingTop: BpkSpacing.LG,
+  paddingInline: BpkSpacing.XL,
+  children: [/*#__PURE__*/_jsx(BpkText, {
+    textAlign: "center",
+    tagName: "p",
+    textStyle: TEXT_STYLES.bodyDefault,
+    color: TEXT_COLORS.textSecondary,
+    children: addMoreDescription
+  }), /*#__PURE__*/_jsx(BpkButton, {
+    type: BUTTON_TYPES.link,
+    size: SIZE_TYPES.small,
+    onClick: onAddMoreClick,
+    children: addMoreLinkText
+  })]
+});
+export default BpkComparisonTableColumnHeaderPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableContentProps } from './common-types';
+declare const BpkComparisonTableContent: ({ columns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableContentProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableContent;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js

@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+
+import { useEffect, useRef } from 'react';
+import { BpkTable, BpkTableBody, BpkTableCell, BpkTableRow, TABLE_BODY_TYPES } from "../../../bpk-component-table";
+import { cssModules } from "../../../bpk-react-utils";
+import BpkComparisonTableHeaderRow from "./BpkComparisonTableHeaderRow";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const MAX_COLUMNS = 3;
+
+// Matches the image area height (5.1875rem × 16px). Opacity goes from 1 → 0 as the user scrolls 0 → 83 px, giving a smooth parallax fade.
+const IMAGE_FADE_THRESHOLD_PX = 83;
+const BpkComparisonTableContent = ({
+  columns,
+  onAddMoreClick,
+  onRemove,
+  strings
+}) => {
+  const scrollContainerRef = useRef(null);
+
+  // Pad with nulls so the table always renders exactly MAX_COLUMNS slots.
+  const displayColumns = [...columns, null, null, null].slice(0, MAX_COLUMNS);
+  const rowIds = columns[0]?.rows.map(row => row.rowId) ?? [];
+
+  // Dev-mode guard: warn if not all columns share the same rowId sequence.
+  if (process.env.NODE_ENV !== 'production' && columns.length > 1) {
+    const rowIdsByColumn = columns.map(column => column.rows.map(row => row.rowId).join(','));
+    const allMatch = rowIdsByColumn.every(ids => ids === rowIdsByColumn[0]);
+    if (!allMatch) {
+      // eslint-disable-next-line no-console
+      console.warn('[BpkComparisonTable] Not all columns share the same rowId sequence. Rows may misalign.');
+    }
+  }
+
+  // Pre-index cells by itemId → rowId for O(1) lookup during render.
+  const cellsByItemAndRow = new Map(columns.map(column => [column.itemId, new Map(column.rows.map(row => [row.rowId, row.cell]))]));
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return undefined;
+    const handleScroll = () => {
+      const {
+        scrollTop
+      } = container;
+      // During the animation phase, push tbody down by the scroll amount so rows appear locked in place.
+      // Once the fade-out completes the offset is fixed at the threshold and normal scrolling resumes.
+      container.style.setProperty('--bpk-rows-offset', `${Math.min(scrollTop, IMAGE_FADE_THRESHOLD_PX)}px`);
+      container.style.setProperty('--bpk-image-opacity', `${1 - Math.min(scrollTop / IMAGE_FADE_THRESHOLD_PX, 1)}`);
+    };
+    container.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: scrollContainerRef,
+    className: getClassName('bpk-comparison-table__scroll-container'),
+    children: /*#__PURE__*/_jsxs(BpkTable, {
+      children: [/*#__PURE__*/_jsx(BpkComparisonTableHeaderRow, {
+        displayColumns: displayColumns,
+        onRemove: onRemove,
+        onAddMoreClick: onAddMoreClick,
+        strings: strings
+      }), /*#__PURE__*/_jsx(BpkTableBody, {
+        type: TABLE_BODY_TYPES.striped,
+        children: rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
+          children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
+            // Placeholder need a distinct background colour not available via BpkTableCell props
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            className: column ? undefined : getClassName('bpk-comparison-table__placeholder-cell'),
+            children: column ? cellsByItemAndRow.get(column.itemId)?.get(rowId) ?? null : null
+          }, column ? `${rowId}-${column.itemId}` : `${rowId}-placeholder-${index}`))
+        }, rowId))
+      })]
+    })
+  });
+};
+export default BpkComparisonTableContent;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeader.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableHeaderProps } from './common-types';
+declare const BpkComparisonTableHeader: ({ children, strings, title }: BpkComparisonTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeader.js

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import { BpkBox, BpkSpacing } from "../../../bpk-component-layout";
+import { BpkModalV3 } from "../../../bpk-component-modal";
+import BpkVisuallyHidden from "../../../bpk-component-visually-hidden";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BpkComparisonTableHeader = ({
+  children,
+  strings,
+  title
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsxs(BpkModalV3.Header, {
+    children: [/*#__PURE__*/_jsx(BpkModalV3.Title, {
+      children: title ?? /*#__PURE__*/_jsx(BpkVisuallyHidden, {
+        children: strings.accessibleLabel
+      })
+    }), /*#__PURE__*/_jsx(BpkModalV3.CloseTrigger, {
+      label: strings.closeLabel
+    })]
+  }), children && /*#__PURE__*/_jsx(BpkBox, {
+    paddingBottom: BpkSpacing.MD,
+    paddingInline: BpkSpacing.Base,
+    children: children
+  })]
+});
+export default BpkComparisonTableHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts

@@ -0,0 +1,9 @@
+import type { BpkComparisonTableStrings, BpkCompareColumn } from './common-types';
+type BpkComparisonTableHeaderRowProps = {
+    displayColumns: Array<BpkCompareColumn | null>;
+    onRemove: (itemId: string) => void;
+    onAddMoreClick: () => void;
+    strings: BpkComparisonTableStrings;
+};
+declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js

@@ -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.
+ */
+
+import { BpkTableHead, BpkTableHeadCell, BpkTableRow } from "../../../bpk-component-table";
+import BpkComparisonTableColumnHeader from "./BpkComparisonTableColumnHeader";
+import BpkComparisonTableColumnHeaderPlaceholder from "./BpkComparisonTableColumnHeaderPlaceholder";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkComparisonTableHeaderRow = ({
+  displayColumns,
+  onAddMoreClick,
+  onRemove,
+  strings
+}) => {
+  const {
+    addMoreDescription,
+    addMoreLinkText,
+    bestTagLabel,
+    removeLabel
+  } = strings;
+  return /*#__PURE__*/_jsx(BpkTableHead, {
+    children: /*#__PURE__*/_jsx(BpkTableRow, {
+      children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableHeadCell, {
+        children: column ? /*#__PURE__*/_jsx(BpkComparisonTableColumnHeader, {
+          ...column,
+          removeLabel: removeLabel,
+          onRemove: onRemove,
+          bestTagLabel: bestTagLabel
+        }) : /*#__PURE__*/_jsx(BpkComparisonTableColumnHeaderPlaceholder, {
+          addMoreDescription: addMoreDescription,
+          addMoreLinkText: addMoreLinkText,
+          onAddMoreClick: onAddMoreClick
+        })
+      }, column ? column.itemId : `placeholder-${index}`))
+    })
+  });
+};
+export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableRootProps } from './common-types';
+declare const BpkComparisonTableRoot: ({ children, isOpen, onClose }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import { BpkModalV3 } from "../../../bpk-component-modal";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BpkComparisonTableRoot = ({
+  children,
+  isOpen,
+  onClose
+}) => /*#__PURE__*/_jsx(BpkModalV3.Root, {
+  open: isOpen,
+  onOpenChange: details => {
+    if (!details.open) {
+      onClose();
+    }
+  },
+  children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
+    children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
+      children: children
+    })]
+  })
+});
+export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+/** A single row entry within a comparison column. */
+export type BpkCompareRow = {
+    /** Stable unique identifier used to align rows across columns. */
+    rowId: string;
+    /** Cell content — consumer-controlled ReactNode. */
+    cell: ReactNode;
+};
+/** Data for one filled comparison column. */
+export type BpkCompareColumn = {
+    /** Stable unique identifier used for removal callbacks. */
+    itemId: string;
+    /** When true, renders a BpkBadge type=brand overlaying the top-left of the image area. */
+    bestTag?: boolean;
+    /** Image src for the header image area. */
+    imageSrc?: string;
+    /** Alt text for the header image. */
+    imageAlt?: string;
+    /** Consumer-owned slot rendered below the image area (name, description, price, CTA...). */
+    headerContent: ReactNode;
+    /** Row data — must match rowId sequences across all columns. */
+    rows: BpkCompareRow[];
+    /** Accessible label for the Remove button (e.g. "Remove rentalcars.com deal"). */
+    removeA11yLabel: string;
+};
+/** All strings required by BpkComparisonTable. */
+export type BpkComparisonTableStrings = {
+    /** Accessible dialog name, used via BpkVisuallyHidden when no visible title is provided. */
+    accessibleLabel: string;
+    /** Accessible label for the modal close button. */
+    closeLabel: string;
+    /** Visible label for the Remove button in each column header. */
+    removeLabel: string;
+    /** Text inside the BpkBadge when bestTag=true (e.g. "Best"). */
+    bestTagLabel: string;
+    /** Description text inside the placeholder column. */
+    addMoreDescription: string;
+    /** Link text inside the placeholder column. */
+    addMoreLinkText: string;
+};
+/** Props for BpkComparisonTable.Root — modal shell only. */
+export type BpkComparisonTableRootProps = {
+    /** Controls whether the modal is open. */
+    isOpen: boolean;
+    /** Called when the modal close trigger is activated or Escape is pressed. */
+    onClose: () => void;
+    /** BpkComparisonTable.Header and BpkComparisonTable.Content. */
+    children: ReactNode;
+};
+/** Props for BpkComparisonTable.Header — modal header + optional AiBlurb slot. */
+export type BpkComparisonTableHeaderProps = {
+    /** Optional modal title rendered via BpkModalV3.Title. */
+    title?: string;
+    strings: BpkComparisonTableStrings;
+    /** Optional slot for AI blurb or any content below the title/close row. */
+    children?: ReactNode;
+};
+/** Props for BpkComparisonTable.Content — modal body with the comparison table. */
+export type BpkComparisonTableContentProps = {
+    /** 1–3 filled columns. Component pads to 3 with placeholder cells automatically. */
+    columns: BpkCompareColumn[];
+    /** Called when a Remove button is clicked, with the column's itemId. */
+    onRemove: (itemId: string) => void;
+    /** Called when the Add more link in a placeholder column is clicked. */
+    onAddMoreClick: () => void;
+    strings: BpkComparisonTableStrings;
+};
+/** Namespace type covering all BpkComparisonTable subcomponents. */
+export type BpkComparisonTableNamespace = {
+    Root: (props: BpkComparisonTableRootProps) => ReactNode;
+    Header: (props: BpkComparisonTableHeaderProps) => ReactNode;
+    Content: (props: BpkComparisonTableContentProps) => ReactNode;
+};

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.js

@@ -0,0 +1 @@
+export {};

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-tray{width:22.1875rem;max-width:100%}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}@media(max-width: 32rem){.bpk-comparison-tray__item{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:absolute;top:0;right:0;display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translate(50%, -50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;position:relative;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}@media(max-width: 32rem){.bpk-comparison-tray__item-placeholder{width:auto;min-width:0;flex:1}}
+.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}

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

@@ -55,6 +55,8 @@ const getContainerAriaProps = (providedId, label) => {
   if (providedId) {
     props.role = 'tablist';
     props['aria-orientation'] = 'horizontal';
+  } else {
+    props.role = 'group';
   }
   if (label) {
     props['aria-label'] = label;

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

@@ -1,4 +1,4 @@
-import component, { TEXT_COLORS, TEXT_STYLES } from './src/BpkText';
+import component, { TEXT_ALIGN, TEXT_COLORS, TEXT_STYLES } from './src/BpkText';
 export default component;
-export { TEXT_COLORS, TEXT_STYLES };
-export type { Tag, TextStyle, TextColor } from './src/BpkText';
+export { TEXT_ALIGN, TEXT_COLORS, TEXT_STYLES };
+export type { Tag, TextAlign, TextStyle, TextColor } from './src/BpkText';

package/bpk-component-text/index.js

@@ -16,6 +16,6 @@
  * limitations under the License.
  */
 
-import component, { TEXT_COLORS, TEXT_STYLES } from "./src/BpkText";
+import component, { TEXT_ALIGN, TEXT_COLORS, TEXT_STYLES } from "./src/BpkText";
 export default component;
-export { TEXT_COLORS, TEXT_STYLES };
+export { TEXT_ALIGN, TEXT_COLORS, TEXT_STYLES };

package/bpk-component-text/src/BpkText.d.ts

@@ -32,6 +32,12 @@ export declare const TEXT_STYLES: {
     readonly editorial2: "editorial-2";
     readonly editorial3: "editorial-3";
 };
+export declare const TEXT_ALIGN: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
 export declare const TEXT_COLORS: {
     readonly textDisabled: "text-disabled";
     readonly textDisabledOnDark: "text-disabled-on-dark";
@@ -45,6 +51,7 @@ export declare const TEXT_COLORS: {
     readonly textSecondary: "text-secondary";
     readonly textSuccess: "text-success";
 };
+export type TextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN];
 export type TextColor = (typeof TEXT_COLORS)[keyof typeof TEXT_COLORS];
 export type TextStyle = (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];
 export type Tag = 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -54,8 +61,9 @@ type Props = {
     tagName?: Tag;
     className?: string | null;
     color?: TextColor | null;
+    textAlign?: TextAlign | null;
     id?: string;
     [rest: string]: any;
 };
-declare const BpkText: ({ children, className, color, tagName: TagName, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkText: ({ children, className, color, tagName: TagName, textAlign, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkText;

package/bpk-component-text/src/BpkText.js

@@ -53,6 +53,12 @@ export const TEXT_STYLES = {
   editorial2: 'editorial-2',
   editorial3: 'editorial-3'
 };
+export const TEXT_ALIGN = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  justify: 'justify'
+};
 export const TEXT_COLORS = {
   textDisabled: 'text-disabled',
   textDisabledOnDark: 'text-disabled-on-dark',
@@ -71,10 +77,11 @@ const BpkText = ({
   className = null,
   color = null,
   tagName: TagName = 'span',
+  textAlign = null,
   textStyle = TEXT_STYLES.bodyDefault,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, color ? `bpk-text--${color}` : '', className);
+  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, color ? `bpk-text--${color}` : '', textAlign ? `bpk-text--align-${textAlign}` : '', className);
   return (
     /*#__PURE__*/
     // Allowed, TagName is always a dom element.

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:var(--bpk-larken-font-stack, "Larken", sans-serif);font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:var(--bpk-larken-font-stack, "Larken", sans-serif);font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:var(--bpk-larken-font-stack, "Larken", 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", sans-serif);font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:var(--bpk-larken-font-stack, "Larken", sans-serif);font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:var(--bpk-larken-font-stack, "Larken", 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--align-start{text-align:start}.bpk-text--align-end{text-align:end}.bpk-text--align-center{text-align:center}.bpk-text--align-justify{text-align:justify}

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: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", -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", -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,button:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]: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}

package/bpk-stylesheets/index.scss

@@ -51,7 +51,17 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-:focus-visible {
+// normalize.css 4.x ships Firefox `:-moz-focusring` rules for both `button` and
+// button-like input controls. These have mixed specificity: `button:-moz-focusring`
+// is 0-1-1, while `[type='button'|'reset'|'submit']:-moz-focusring` is 0-2-0, and
+// both beat a bare `:focus-visible` rule (0-1-0) in Firefox. Adding matching
+// button/control `:focus-visible` selectors lets Backpack's ring win by source
+// order, restoring WCAG-compliant focus visibility on those controls.
+:focus-visible,
+button:focus-visible,
+[type='button']:focus-visible,
+[type='reset']:focus-visible,
+[type='submit']:focus-visible {
   @include utils.bpk-focus-indicator;
 }
 

package/package.json

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