@skyscanner/backpack-web 42.0.0-test → 42.1.0

package/bpk-component-checkbox-card/src/common-types.js

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+/**
+ * Variant types for visual presentation based on canvas/surface background
+ * - onCanvasDefault: For use on default/white backgrounds (selected: dark blue #05203C)
+ * - onCanvasContrast: For use on contrast/colored backgrounds (selected: dark blue #05203C)
+ * - onSurfaceContrast: For use on contrast surfaces (selected: accent blue #0062E3)
+ * - cars: For use in cars product context — same styling as onCanvasDefault but with
+ *   the corner Indicator automatically rendered (no need to add <BpkCheckboxCard.Indicator />)
+ */
+export const CHECKBOX_CARD_VARIANTS = {
+  onCanvasDefault: 'on-canvas-default',
+  onCanvasContrast: 'on-canvas-contrast',
+  onSurfaceContrast: 'on-surface-contrast',
+  cars: 'cars'
+};
+/**
+ * Radius types for border-radius
+ */
+export const CHECKBOX_CARD_RADIUS = {
+  square: 'square',
+  rounded: 'rounded'
+};
+
+/**
+ * Change handler signature for checkbox card
+ */

package/bpk-component-checkbox-card/src/themeAttributes.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Theme attributes for BpkCheckboxCard component.
+ *
+ * These attributes can be customized using BpkThemeProvider to override
+ * the default colors and styles of the checkbox card.
+ *
+ * Use `createCheckboxCardTheme` to build a partial theme — only specify
+ * the attributes you want to change; the rest fall back to design tokens.
+ *
+ * @example
+ * import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ * import {
+ *   BpkCheckboxCard,
+ *   CHECKBOX_CARD_THEME_ATTRIBUTES,
+ *   createCheckboxCardTheme,
+ * } from '@skyscanner/backpack-web/bpk-component-checkbox-card';
+ *
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedTextColor: '#111236',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ *
+ * <BpkThemeProvider theme={theme} themeAttributes={CHECKBOX_CARD_THEME_ATTRIBUTES}>
+ *   <BpkCheckboxCard.Root>
+ *     ...
+ *   </BpkCheckboxCard.Root>
+ * </BpkThemeProvider>
+ */
+declare const CHECKBOX_CARD_THEME_ATTRIBUTES: readonly ["checkboxCardDefaultBackgroundColor", "checkboxCardDefaultTextColor", "checkboxCardSecondaryTextColor", "checkboxCardHoverBackgroundColor", "checkboxCardDefaultBorderColor", "checkboxCardHoverBorderColor", "checkboxCardCheckedBackgroundColor", "checkboxCardCheckedTextColor", "checkboxCardCheckedBorderColor", "checkboxCardDisabledBackgroundColor", "checkboxCardDisabledTextColor", "checkboxCardIndicatorBackgroundColor", "checkboxCardIndicatorTextColor"];
+type CheckboxCardThemeKey = (typeof CHECKBOX_CARD_THEME_ATTRIBUTES)[number];
+type CheckboxCardTheme = Record<CheckboxCardThemeKey, string>;
+/**
+ * Creates a complete BpkCheckboxCard theme by merging your overrides with the
+ * default design-token values. Pass only the attributes you want to change.
+ *
+ * @example
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ */
+export declare function createCheckboxCardTheme(overrides?: Partial<CheckboxCardTheme>): CheckboxCardTheme;
+export default CHECKBOX_CARD_THEME_ATTRIBUTES;

package/bpk-component-checkbox-card/src/themeAttributes.js

@@ -0,0 +1,87 @@
+/*
+ * 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 { canvasDay, coreAccentDay, colorWhite, lineDay, surfaceContrastDay, surfaceLowContrastDay, textDisabledDay, textOnDarkDay, textPrimaryDay, textSecondaryDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+/**
+ * Theme attributes for BpkCheckboxCard component.
+ *
+ * These attributes can be customized using BpkThemeProvider to override
+ * the default colors and styles of the checkbox card.
+ *
+ * Use `createCheckboxCardTheme` to build a partial theme — only specify
+ * the attributes you want to change; the rest fall back to design tokens.
+ *
+ * @example
+ * import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ * import {
+ *   BpkCheckboxCard,
+ *   CHECKBOX_CARD_THEME_ATTRIBUTES,
+ *   createCheckboxCardTheme,
+ * } from '@skyscanner/backpack-web/bpk-component-checkbox-card';
+ *
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedTextColor: '#111236',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ *
+ * <BpkThemeProvider theme={theme} themeAttributes={CHECKBOX_CARD_THEME_ATTRIBUTES}>
+ *   <BpkCheckboxCard.Root>
+ *     ...
+ *   </BpkCheckboxCard.Root>
+ * </BpkThemeProvider>
+ */
+const CHECKBOX_CARD_THEME_ATTRIBUTES = ['checkboxCardDefaultBackgroundColor', 'checkboxCardDefaultTextColor', 'checkboxCardSecondaryTextColor', 'checkboxCardHoverBackgroundColor', 'checkboxCardDefaultBorderColor', 'checkboxCardHoverBorderColor', 'checkboxCardCheckedBackgroundColor', 'checkboxCardCheckedTextColor', 'checkboxCardCheckedBorderColor', 'checkboxCardDisabledBackgroundColor', 'checkboxCardDisabledTextColor', 'checkboxCardIndicatorBackgroundColor', 'checkboxCardIndicatorTextColor'];
+/** Default theme values matching the SCSS token fallbacks */
+const CHECKBOX_CARD_DEFAULT_THEME = {
+  checkboxCardDefaultBackgroundColor: canvasDay,
+  checkboxCardDefaultTextColor: textPrimaryDay,
+  checkboxCardSecondaryTextColor: textSecondaryDay,
+  checkboxCardHoverBackgroundColor: surfaceLowContrastDay,
+  checkboxCardDefaultBorderColor: lineDay,
+  checkboxCardHoverBorderColor: lineDay,
+  checkboxCardCheckedBackgroundColor: surfaceContrastDay,
+  checkboxCardCheckedTextColor: textOnDarkDay,
+  checkboxCardCheckedBorderColor: 'transparent',
+  checkboxCardDisabledBackgroundColor: canvasDay,
+  checkboxCardDisabledTextColor: textDisabledDay,
+  checkboxCardIndicatorBackgroundColor: coreAccentDay,
+  checkboxCardIndicatorTextColor: colorWhite
+};
+
+/**
+ * Creates a complete BpkCheckboxCard theme by merging your overrides with the
+ * default design-token values. Pass only the attributes you want to change.
+ *
+ * @example
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ */
+
+export function createCheckboxCardTheme(overrides = {}) {
+  return {
+    ...CHECKBOX_CARD_DEFAULT_THEME,
+    ...overrides
+  };
+}
+export default CHECKBOX_CARD_THEME_ATTRIBUTES;

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

@@ -3,10 +3,10 @@ import BpkDropdownChip from './src/BpkDropdownChip';
 import BpkIconChip from './src/BpkIconChip';
 import BpkSelectableChip, { type Props as SelectableProps } from './src/BpkSelectableChip';
 import { CHIP_TYPES } from './src/commonTypes';
-import themeAttributes from './src/themeAttributes';
+import themeAttributes, { chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes } from './src/themeAttributes';
 import type { CommonProps } from './src/commonTypes';
 export type BpkSelectableChipProps = SelectableProps;
 export type BpkDismissibleChipProps = CommonProps;
 export type BpkDropdownChipProps = CommonProps;
 export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes, chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes, };

package/bpk-component-chip/index.js

@@ -21,6 +21,6 @@ import BpkDropdownChip from "./src/BpkDropdownChip";
 import BpkIconChip from "./src/BpkIconChip";
 import BpkSelectableChip from "./src/BpkSelectableChip";
 import { CHIP_TYPES } from "./src/commonTypes";
-import themeAttributes from "./src/themeAttributes";
+import themeAttributes, { chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes } from "./src/themeAttributes";
 export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes, chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes };

package/bpk-component-chip/src/BpkSelectableChip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}
+.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;cursor:pointer;border-radius:.5rem;border-radius:var(--bpk-chip-border-radius, 0.5rem)}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-on-dark-background-color, transparent);color:#fff;color:var(--bpk-chip-on-dark-text-color, rgb(255, 255, 255));box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-border-color, rgba(255, 255, 255, 0.5)) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-active-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-active-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-background-color, transparent);color:#161616;color:var(--bpk-chip-default-text-color, rgb(22, 22, 22));box-shadow:0 0 0 1px #c1c7cf inset;box-shadow:0 0 0 1px var(--bpk-chip-default-border-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-active-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-active-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;background-color:var(--bpk-chip-on-image-background-color, rgb(255, 255, 255));color:#161616;color:var(--bpk-chip-on-image-text-color, rgb(22, 22, 22));box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-active-background-color, rgb(239, 243, 248))}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}

package/bpk-component-chip/src/themeAttributes.d.ts

@@ -1,2 +1,6 @@
 declare const _default: string[];
 export default _default;
+export declare const chipBorderRadiusThemeAttributes: string[];
+export declare const chipDefaultThemeAttributes: string[];
+export declare const chipOnDarkThemeAttributes: string[];
+export declare const chipOnImageThemeAttributes: string[];

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

@@ -16,4 +16,10 @@
  * limitations under the License.
  */
 
-export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
+// Backward-compatible: original 8 selected-state attributes.
+// Do not modify — existing consumers depend on this exact list.
+export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
+export const chipBorderRadiusThemeAttributes = ['chipBorderRadius'];
+export const chipDefaultThemeAttributes = ['chipDefaultBackgroundColor', 'chipDefaultTextColor', 'chipDefaultBorderColor', 'chipDefaultHoverBackgroundColor', 'chipDefaultHoverBorderColor', 'chipDefaultActiveBorderColor', 'chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipDefaultSelectedHoverBackgroundColor', 'chipDefaultSelectedActiveBackgroundColor'];
+export const chipOnDarkThemeAttributes = ['chipOnDarkBackgroundColor', 'chipOnDarkTextColor', 'chipOnDarkBorderColor', 'chipOnDarkHoverBorderColor', 'chipOnDarkActiveBorderColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnDarkSelectedHoverBackgroundColor', 'chipOnDarkSelectedActiveBackgroundColor'];
+export const chipOnImageThemeAttributes = ['chipOnImageBackgroundColor', 'chipOnImageTextColor', 'chipOnImageHoverBackgroundColor', 'chipOnImageActiveBackgroundColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedTextColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor'];

package/bpk-component-pagination/src/BpkPaginationPage.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
+.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-pagination-page.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-pagination-page--not-selected.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}

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

@@ -25,7 +25,7 @@ import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
 // These constants are here to facilitate calculating the height
@@ -46,6 +46,7 @@ const BpkScrollableCalendarGridList = props => {
     ...rest
   } = props;
   const listRef = useRef(null);
+  const sentinelRef = useRef(null);
   const startDate = startOfDay(startOfMonth(minDate));
   const endDate = startOfDay(startOfMonth(rest.maxDate));
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
@@ -54,11 +55,13 @@ const BpkScrollableCalendarGridList = props => {
   const rowHeight = customRowHeight;
   // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
   const estimatedMonthItemHeight = (BASE_MONTH_ITEM_HEIGHT + 5 * rowHeight) * DEFAULT_ROOT_FONT_SIZE;
-  const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
 
   // The `react-window` API requires the height in pixels to be specified
   // To be able to scale text size, we use rem and then we get the root font size so that we can calculate the final value in px
-  const [rootFontSize, setRootFontSize] = useState(getInitialRootFontSize);
+  // Initialise to the default; the sentinel ResizeObserver corrects this to the true rendered
+  // value immediately on mount, so we never rely on getComputedStyle which can be stale under
+  // browser font scaling.
+  const [rootFontSize, setRootFontSize] = useState(DEFAULT_ROOT_FONT_SIZE);
   const months = useMemo(() => getMonthsArray(startDate, monthsCount), [minDate, monthsCount]);
   const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, rowHeight * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
   useEffect(() => {
@@ -67,8 +70,35 @@ const BpkScrollableCalendarGridList = props => {
       listRef.current.resetAfterIndex(0);
     }
   }, [monthItemHeights]);
+  useEffect(() => {
+    // Some browsers apply font scaling at the rendering level without updating getComputedStyle.
+    // A sentinel element sized to 1rem lets us measure the true rendered px-per-rem directly,
+    // so that react-window item heights stay accurate regardless of browser font scaling.
+    const sentinel = sentinelRef.current;
+    if (!sentinel || typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        const newRootFontSize = entry.contentRect.width || DEFAULT_ROOT_FONT_SIZE;
+        setRootFontSize(newRootFontSize);
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, []);
   const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
   const getItemSize = index => monthItemHeights[index] || estimatedMonthItemHeight;
+  const calculateOffsetInPixels = numberOfMonths => {
+    // The `react-window` API requires the scroll offset to be provided in pixels.
+    // Here we use the pre-calculated item heights to find the correct pixel offset
+    let result = 0;
+    for (let i = 0; i < numberOfMonths; i += 1) {
+      result += getItemSize(i);
+    }
+    return result;
+  };
+  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
+  const selectedDate = focusedDate || date;
   const rowRenderer = ({
     index,
     style
@@ -85,26 +115,14 @@ const BpkScrollableCalendarGridList = props => {
       "aria-hidden": index !== 1
     })
   });
-  const calculateOffsetInPixels = numberOfMonths => {
-    // The `react-window` API requires the scroll offset to be provided in pixels.
-    // Here we use the pre-calculated item heights to find the correct pixel offset
-    let result = 0;
-    for (let i = 0; i < numberOfMonths; i += 1) {
-      result += getItemSize(i);
-    }
-    return result;
-  };
-  const onResize = () => {
-    const newRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
-    setRootFontSize(newRootFontSize);
-  };
-  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
-  const selectedDate = focusedDate || date;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
     ...getDataComponentAttribute('ScrollableCalendarGridList'),
-    children: /*#__PURE__*/_jsx(AutoSizer, {
-      onResize: onResize,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: sentinelRef,
+      className: getClassName('bpk-scrollable-calendar-grid-list__font-sentinel'),
+      "aria-hidden": "true"
+    }), /*#__PURE__*/_jsx(AutoSizer, {
       defaultHeight: estimatedMonthItemHeight,
       defaultWidth: ESTIMATED_MONTH_ITEM_WIDTH,
       children: ({
@@ -124,7 +142,7 @@ const BpkScrollableCalendarGridList = props => {
         ref: listRef,
         children: rowRenderer
       })
-    })
+    })]
   });
 };
 export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}
+.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__font-sentinel{position:absolute;visibility:hidden;width:1rem;height:1rem;overflow:hidden;pointer-events:none}

package/bpk-component-scrollable-calendar/src/utils.d.ts

@@ -1,3 +1,3 @@
-declare const getMonthsArray: (startDate: Date, count: number) => Date[];
+declare const getMonthsArray: (startDate: Date, count: number) => any[];
 declare const getMonthItemHeights: (months: Date[], weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, columnCount: number, rowHeight: number, baseMonthItemHeight: number) => number[];
 export { getMonthsArray, getMonthItemHeights };

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

@@ -2,3 +2,5 @@ import BpkSegmentedControl, { useSegmentedControlPanels, type Props as BpkSegmen
 export type { BpkSegmentControlProps, TabPanelProps };
 export { useSegmentedControlPanels };
 export default BpkSegmentedControl;
+export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from './src/BpkSegmentedControlV2/BpkSegmentedControlV2';
+export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, SegmentTypesV2, } from './src/BpkSegmentedControlV2/common-types';

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

@@ -18,4 +18,5 @@
 
 import BpkSegmentedControl, { useSegmentedControlPanels } from "./src/BpkSegmentedControl";
 export { useSegmentedControlPanels };
-export default BpkSegmentedControl;
+export default BpkSegmentedControl;
+export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from "./src/BpkSegmentedControlV2/BpkSegmentedControlV2";

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

@@ -0,0 +1,19 @@
+import { SEGMENT_TYPES_V2 } from './common-types';
+import type { BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, BpkSegmentedControlV2RootProps } from './common-types';
+declare const BpkSegmentedControlV2Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemControl: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2Indicator: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2: {
+    Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
+    ItemControl: () => import("react/jsx-runtime").JSX.Element;
+    ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+    Indicator: () => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkSegmentedControlV2;
+export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2, };
+export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, };

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

@@ -0,0 +1,81 @@
+/*
+ * 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 { SegmentGroup } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import { SEGMENT_TYPES_V2 } from "./common-types";
+import STYLES from "./BpkSegmentedControlV2.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkSegmentedControlV2Root = ({
+  children,
+  defaultValue,
+  label,
+  onChange,
+  shadow = false,
+  type = SEGMENT_TYPES_V2.CanvasDefault,
+  value
+}) => {
+  const containerClass = getClassName('bpk-segmented-control-v2', `bpk-segmented-control-v2--${type}`, shadow && 'bpk-segmented-control-v2--shadow');
+  return /*#__PURE__*/_jsxs(SegmentGroup.Root, {
+    className: containerClass,
+    value: value,
+    defaultValue: defaultValue,
+    onValueChange: onChange ? ({
+      value: selectedValue
+    }) => {
+      if (selectedValue !== null) onChange(selectedValue);
+    } : undefined,
+    orientation: "horizontal",
+    ...getDataComponentAttribute('SegmentedControlV2'),
+    children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
+      children: label
+    }), children]
+  });
+};
+const BpkSegmentedControlV2Item = ({
+  children,
+  value
+}) => /*#__PURE__*/_jsx(SegmentGroup.Item, {
+  value: value,
+  className: getClassName('bpk-segmented-control-v2__item'),
+  children: children
+});
+const BpkSegmentedControlV2ItemText = ({
+  children
+}) => /*#__PURE__*/_jsx(SegmentGroup.ItemText, {
+  className: getClassName('bpk-segmented-control-v2__item-text'),
+  children: children
+});
+const BpkSegmentedControlV2ItemControl = () => /*#__PURE__*/_jsx(SegmentGroup.ItemControl, {
+  className: getClassName('bpk-segmented-control-v2__item-control')
+});
+const BpkSegmentedControlV2ItemHiddenInput = () => /*#__PURE__*/_jsx(SegmentGroup.ItemHiddenInput, {});
+const BpkSegmentedControlV2Indicator = () => /*#__PURE__*/_jsx(SegmentGroup.Indicator, {
+  className: getClassName('bpk-segmented-control-v2__indicator')
+});
+const BpkSegmentedControlV2 = {
+  Root: BpkSegmentedControlV2Root,
+  Item: BpkSegmentedControlV2Item,
+  ItemText: BpkSegmentedControlV2ItemText,
+  ItemControl: BpkSegmentedControlV2ItemControl,
+  ItemHiddenInput: BpkSegmentedControlV2ItemHiddenInput,
+  Indicator: BpkSegmentedControlV2Indicator
+};
+export default BpkSegmentedControlV2;
+export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2 };

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.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-segmented-control-v2{position:relative;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;border-radius:.5rem;background-color:#eff3f8;overflow:hidden}.bpk-segmented-control-v2--canvas-default{background-color:#eff3f8}.bpk-segmented-control-v2--canvas-contrast{background-color:#fff}.bpk-segmented-control-v2--canvas-contrast .bpk-segmented-control-v2__indicator{background-color:#fff}.bpk-segmented-control-v2--surface-default{background-color:#eff3f8}.bpk-segmented-control-v2--surface-default .bpk-segmented-control-v2__indicator{background-color:#eff3f8}.bpk-segmented-control-v2--surface-contrast{background-color:hsla(0,0%,100%,.1)}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__indicator{background-color:#024daf}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__item-text{color:#fff;border-inline-start-color:hsla(0,0%,100%,.5)}.bpk-segmented-control-v2--shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control-v2>[data-part=label]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-segmented-control-v2__indicator{position:absolute;top:var(--top);left:var(--left);width:var(--width);height:var(--height);background-color:#05203c;--transition-duration: 0ms}.bpk-segmented-control-v2__item{display:grid;cursor:pointer}.bpk-segmented-control-v2__item:first-of-type .bpk-segmented-control-v2__item-text{border-inline-start:none}.bpk-segmented-control-v2__item:has([data-state=checked]) .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has([data-state=checked])+.bpk-segmented-control-v2__item .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has(:focus-visible){z-index:1;outline:.125rem solid #0062e3;outline-offset:-0.125rem}.bpk-segmented-control-v2__item-control{display:none}.bpk-segmented-control-v2__item-text{padding:.25rem .5rem;display:flex;z-index:1;min-height:2rem;grid-area:1/1;justify-content:center;align-items:center;transition:color 50ms ease-in-out;color:#161616;overflow:hidden;border-inline-start:1px solid #c1c7cf;pointer-events:none;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control-v2__item-text svg{fill:currentcolor}.bpk-segmented-control-v2__item-text[data-state=checked]{color:#fff}

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+export declare const SEGMENT_TYPES_V2: {
+    readonly CanvasDefault: "canvas-default";
+    readonly CanvasContrast: "canvas-contrast";
+    readonly SurfaceDefault: "surface-default";
+    readonly SurfaceContrast: "surface-contrast";
+};
+export type SegmentTypesV2 = (typeof SEGMENT_TYPES_V2)[keyof typeof SEGMENT_TYPES_V2];
+export type BpkSegmentedControlV2RootProps = {
+    /**
+     * Slot content — one or more BpkSegmentedControlV2.Item elements.
+     */
+    children: ReactNode;
+    /**
+     * Controlled selected value. When provided, onChange must also be provided.
+     */
+    value?: string;
+    /**
+     * Initial selected value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the selected segment changes. Receives the value of the newly selected item.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Pre-defined surface theme controlling default token values.
+     * @default 'canvas-default'
+     */
+    type?: SegmentTypesV2;
+    /**
+     * Applies a box shadow to the group container.
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * Accessible label for the radiogroup. Always required to satisfy WCAG 4.1.2
+     * (the role="radiogroup" element must have an accessible name).
+     */
+    label: string;
+};
+export type BpkSegmentedControlV2ItemProps = {
+    /**
+     * Unique identifier for this segment within the group.
+     */
+    value: string;
+    /**
+     * Slot content — typically ItemText + ItemControl + ItemHiddenInput.
+     */
+    children: ReactNode;
+};
+export type BpkSegmentedControlV2ItemTextProps = {
+    /**
+     * Visible content of the segment — text, icons, or a combination.
+     */
+    children: ReactNode;
+};

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+export const SEGMENT_TYPES_V2 = {
+  CanvasDefault: 'canvas-default',
+  CanvasContrast: 'canvas-contrast',
+  SurfaceDefault: 'surface-default',
+  SurfaceContrast: 'surface-contrast'
+};