@skyscanner/backpack-web 42.6.0 → 42.8.0

package/bpk-component-ai-blurb/index.d.ts

@@ -0,0 +1,3 @@
+import BpkAiBlurb from './src/BpkAiBlurb';
+export type { BpkAiBlurbRootProps, BpkAiBlurbHeaderProps, BpkAiBlurbSummaryProps, BpkAiBlurbFeedbackProps, BpkAiBlurbNamespace, } from './src/common-types';
+export default BpkAiBlurb;

package/bpk-component-ai-blurb/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkAiBlurb from "./src/BpkAiBlurb";
+export default BpkAiBlurb;

package/bpk-component-ai-blurb/src/BpkAiBlurb.d.ts

@@ -0,0 +1,29 @@
+import type { BpkAiBlurbNamespace } from './common-types';
+/**
+ * BpkAiBlurb is a composable component for displaying AI-generated summaries.
+ *
+ * Compose subcomponents to build each state:
+ *
+ * @example
+ * // Loading state
+ * <BpkAiBlurb.Root>
+ *   <BpkAiBlurb.Header title="Summarized by AI" />
+ *   <BpkAiBlurb.Summary state="thinking" thinkingText="Comparing your shortlist" />
+ * </BpkAiBlurb.Root>
+ *
+ * @example
+ * // Success state with feedback
+ * <BpkAiBlurb.Root>
+ *   <BpkAiBlurb.Header title="Summarized by AI" />
+ *   <BpkAiBlurb.Summary state="aiResponse" aiResponseText={llmText} />
+ *   <BpkAiBlurb.Feedback
+ *     feedbackText="Was this helpful?"
+ *     thankYouText="Thanks for your feedback!"
+ *     thumbsUpLabel="Thumbs up"
+ *     thumbsDownLabel="Thumbs down"
+ *     onFeedback={(positive) => trackEvent(positive ? 'thumb_up' : 'thumb_down')}
+ *   />
+ * </BpkAiBlurb.Root>
+ */
+declare const BpkAiBlurb: BpkAiBlurbNamespace;
+export default BpkAiBlurb;

package/bpk-component-ai-blurb/src/BpkAiBlurb.js

@@ -0,0 +1,57 @@
+/*
+ * 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 BpkAiBlurbEllipsis from "./BpkAiBlurbEllipsis";
+import BpkAiBlurbFeedback from "./BpkAiBlurbFeedback";
+import BpkAiBlurbHeader from "./BpkAiBlurbHeader";
+import BpkAiBlurbRoot from "./BpkAiBlurbRoot";
+import BpkAiBlurbSummary from "./BpkAiBlurbSummary";
+/**
+ * BpkAiBlurb is a composable component for displaying AI-generated summaries.
+ *
+ * Compose subcomponents to build each state:
+ *
+ * @example
+ * // Loading state
+ * <BpkAiBlurb.Root>
+ *   <BpkAiBlurb.Header title="Summarized by AI" />
+ *   <BpkAiBlurb.Summary state="thinking" thinkingText="Comparing your shortlist" />
+ * </BpkAiBlurb.Root>
+ *
+ * @example
+ * // Success state with feedback
+ * <BpkAiBlurb.Root>
+ *   <BpkAiBlurb.Header title="Summarized by AI" />
+ *   <BpkAiBlurb.Summary state="aiResponse" aiResponseText={llmText} />
+ *   <BpkAiBlurb.Feedback
+ *     feedbackText="Was this helpful?"
+ *     thankYouText="Thanks for your feedback!"
+ *     thumbsUpLabel="Thumbs up"
+ *     thumbsDownLabel="Thumbs down"
+ *     onFeedback={(positive) => trackEvent(positive ? 'thumb_up' : 'thumb_down')}
+ *   />
+ * </BpkAiBlurb.Root>
+ */
+const BpkAiBlurb = {
+  Root: BpkAiBlurbRoot,
+  Header: BpkAiBlurbHeader,
+  Summary: BpkAiBlurbSummary,
+  Ellipsis: BpkAiBlurbEllipsis,
+  Feedback: BpkAiBlurbFeedback
+};
+export default BpkAiBlurb;

package/bpk-component-ai-blurb/src/BpkAiBlurb.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-ai-blurb{display:flex;flex-direction:column;gap:.5rem}.bpk-ai-blurb__header{color:#626971}.bpk-ai-blurb__header svg{fill:currentcolor}.bpk-ai-blurb__summary{display:block}.bpk-ai-blurb__error{display:flex;margin:0;flex-wrap:wrap;align-items:baseline;gap:0 .25rem;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-ai-blurb__feedback-thumb{display:inline-flex;padding:0;align-items:center;border:none;background:none;color:#161616;cursor:pointer;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-ai-blurb__feedback-thumb svg{fill:currentcolor}.bpk-ai-blurb__feedback-thumb:hover{color:#626971}.bpk-ai-blurb__feedback-thumb:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-ai-blurb__ellipsis{display:inline;vertical-align:baseline;margin-inline-start:.25rem}.bpk-ai-blurb__ellipsis-dot{display:inline;opacity:0;vertical-align:baseline;animation:bpk-ai-blurb-ellipsis-dot-1 1.2s infinite step-end}@media(prefers-reduced-motion: reduce){.bpk-ai-blurb__ellipsis-dot{opacity:1;animation:none}}.bpk-ai-blurb__ellipsis-dot--2{animation-name:bpk-ai-blurb-ellipsis-dot-2}.bpk-ai-blurb__ellipsis-dot--3{animation-name:bpk-ai-blurb-ellipsis-dot-3}@keyframes bpk-ai-blurb-ellipsis-dot-1{0%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes bpk-ai-blurb-ellipsis-dot-2{0%{opacity:0}25%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes bpk-ai-blurb-ellipsis-dot-3{0%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:0}}

package/bpk-component-ai-blurb/src/BpkAiBlurbEllipsis.d.ts

@@ -0,0 +1,2 @@
+declare const BpkAiBlurbEllipsis: () => import("react/jsx-runtime").JSX.Element;
+export default BpkAiBlurbEllipsis;

package/bpk-component-ai-blurb/src/BpkAiBlurbEllipsis.js

@@ -0,0 +1,40 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkAiBlurb.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+
+// Animated three-dot ellipsis for inline use at the end of loading text.
+// Hidden from assistive technology — ensure surrounding text provides context.
+const BpkAiBlurbEllipsis = () => /*#__PURE__*/_jsxs("span", {
+  className: getClassName('bpk-ai-blurb__ellipsis'),
+  "aria-hidden": "true",
+  children: [/*#__PURE__*/_jsx("span", {
+    className: getClassName('bpk-ai-blurb__ellipsis-dot'),
+    children: "."
+  }), /*#__PURE__*/_jsx("span", {
+    className: getClassName('bpk-ai-blurb__ellipsis-dot', 'bpk-ai-blurb__ellipsis-dot--2'),
+    children: "."
+  }), /*#__PURE__*/_jsx("span", {
+    className: getClassName('bpk-ai-blurb__ellipsis-dot', 'bpk-ai-blurb__ellipsis-dot--3'),
+    children: "."
+  })]
+});
+export default BpkAiBlurbEllipsis;

package/bpk-component-ai-blurb/src/BpkAiBlurbFeedback.d.ts

@@ -0,0 +1,3 @@
+import type { BpkAiBlurbFeedbackProps } from './common-types';
+declare const BpkAiBlurbFeedback: ({ feedbackText, onFeedback, thankYouText, thumbsDownLabel, thumbsUpLabel, }: BpkAiBlurbFeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkAiBlurbFeedback;

package/bpk-component-ai-blurb/src/BpkAiBlurbFeedback.js

@@ -0,0 +1,74 @@
+/*
+ * 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 { useState } from 'react';
+import BpkAriaLive from "../../bpk-component-aria-live";
+import BpkSmallThumbsDownIcon from "../../bpk-component-icon/sm/thumbs-down";
+import BpkSmallThumbsUpIcon from "../../bpk-component-icon/sm/thumbs-up";
+import { BpkFlex, BpkSpacing } from "../../bpk-component-layout";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkAiBlurb.module.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkAiBlurbFeedback = ({
+  feedbackText,
+  onFeedback,
+  thankYouText,
+  thumbsDownLabel,
+  thumbsUpLabel
+}) => {
+  const [hasVoted, setHasVoted] = useState(false);
+  const handleVote = positive => {
+    setHasVoted(true);
+    onFeedback?.(positive);
+  };
+  return /*#__PURE__*/_jsxs(BpkFlex, {
+    align: "center",
+    gap: BpkSpacing.SM,
+    children: [!hasVoted && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.caption,
+        children: feedbackText
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: getClassName('bpk-ai-blurb__feedback-thumb'),
+        onClick: () => handleVote(true),
+        "aria-label": thumbsUpLabel,
+        children: /*#__PURE__*/_jsx(BpkSmallThumbsUpIcon, {
+          "aria-hidden": true
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: getClassName('bpk-ai-blurb__feedback-thumb'),
+        onClick: () => handleVote(false),
+        "aria-label": thumbsDownLabel,
+        children: /*#__PURE__*/_jsx(BpkSmallThumbsDownIcon, {
+          "aria-hidden": true
+        })
+      })]
+    }), /*#__PURE__*/_jsx(BpkAriaLive, {
+      visible: hasVoted,
+      children: hasVoted ? /*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.caption,
+        children: thankYouText
+      }) : ''
+    })]
+  });
+};
+export default BpkAiBlurbFeedback;

package/bpk-component-ai-blurb/src/BpkAiBlurbHeader.d.ts

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

package/bpk-component-ai-blurb/src/BpkAiBlurbHeader.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 AiIcon from "../../bpk-component-icon/sm/ai";
+import { BpkFlex, BpkSpacing } from "../../bpk-component-layout";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkAiBlurb.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkAiBlurbHeader = ({
+  title
+}) => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-ai-blurb__header'),
+  children: /*#__PURE__*/_jsxs(BpkFlex, {
+    align: "center",
+    gap: BpkSpacing.SM,
+    children: [/*#__PURE__*/_jsx(AiIcon, {
+      "aria-hidden": true
+    }), /*#__PURE__*/_jsx(BpkText, {
+      textStyle: TEXT_STYLES.caption,
+      children: title
+    })]
+  })
+});
+export default BpkAiBlurbHeader;

package/bpk-component-ai-blurb/src/BpkAiBlurbRoot.d.ts

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

package/bpk-component-ai-blurb/src/BpkAiBlurbRoot.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkAiBlurb.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkAiBlurbRoot = ({
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-ai-blurb'),
+  ...getDataComponentAttribute('AiBlurb'),
+  children: children
+});
+export default BpkAiBlurbRoot;

package/bpk-component-ai-blurb/src/BpkAiBlurbSummary.d.ts

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

package/bpk-component-ai-blurb/src/BpkAiBlurbSummary.js

@@ -0,0 +1,54 @@
+/*
+ * 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 BpkLink from "../../bpk-component-link";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import BpkAiBlurbEllipsis from "./BpkAiBlurbEllipsis";
+import STYLES from "./BpkAiBlurb.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkAiBlurbSummary = props => {
+  let content;
+  if (props.state === 'aiResponse') {
+    content = props.aiResponseText;
+  } else if (props.state === 'thinking') {
+    content = /*#__PURE__*/_jsxs(BpkText, {
+      tagName: "p",
+      textStyle: TEXT_STYLES.caption,
+      children: [props.thinkingText, /*#__PURE__*/_jsx(BpkAiBlurbEllipsis, {})]
+    });
+  } else {
+    content = /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-ai-blurb__error'),
+      children: [/*#__PURE__*/_jsx(BpkText, {
+        tagName: "span",
+        textStyle: TEXT_STYLES.caption,
+        children: props.errorText
+      }), /*#__PURE__*/_jsx(BpkLink, {
+        href: props.errorLinkHref,
+        children: props.errorLinkText
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-ai-blurb__summary'),
+    children: content
+  });
+};
+export default BpkAiBlurbSummary;

package/bpk-component-ai-blurb/src/common-types.d.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+export type BpkAiBlurbRootProps = {
+    /** Content to render inside the AI summary container */
+    children: ReactNode;
+};
+export type BpkAiBlurbHeaderProps = {
+    /** Title string displayed next to the AI spark icon. Not translated by Backpack. */
+    title: string;
+};
+export type BpkAiBlurbSummaryProps = {
+    /** Controls which content is displayed. */
+    state: 'aiResponse';
+    /** AI response content. Consumer controls formatting. */
+    aiResponseText: ReactNode;
+} | {
+    /** Controls which content is displayed. */
+    state: 'thinking';
+    /** Text displayed followed by an animated ellipsis. */
+    thinkingText: string;
+} | {
+    /** Controls which content is displayed. */
+    state: 'error';
+    /** Text displayed before the error link. */
+    errorText: string;
+    /** Text for the inline error link. */
+    errorLinkText: string;
+    /** href for the inline error link. */
+    errorLinkHref: string;
+};
+export type BpkAiBlurbFeedbackProps = {
+    /** Text displayed before a vote is cast. e.g. "Was this helpful?" — not translated by Backpack. */
+    feedbackText: string;
+    /** Text displayed after a vote is cast. e.g. "Thanks for your feedback!" — not translated by Backpack. */
+    thankYouText: string;
+    /** Accessible label for the thumbs-up button. Not translated by Backpack. */
+    thumbsUpLabel: string;
+    /** Accessible label for the thumbs-down button. Not translated by Backpack. */
+    thumbsDownLabel: string;
+    /**
+     * Called when either thumb button is pressed.
+     * `positive` is `true` for thumbs-up, `false` for thumbs-down.
+     */
+    onFeedback?: (positive: boolean) => void;
+};
+export type BpkAiBlurbNamespace = {
+    Root: {
+        (props: BpkAiBlurbRootProps): ReactNode;
+        displayName?: string;
+    };
+    Header: {
+        (props: BpkAiBlurbHeaderProps): ReactNode;
+        displayName?: string;
+    };
+    Summary: {
+        (props: BpkAiBlurbSummaryProps): ReactNode;
+        displayName?: string;
+    };
+    Ellipsis: {
+        (): ReactNode;
+        displayName?: string;
+    };
+    Feedback: {
+        (props: BpkAiBlurbFeedbackProps): ReactNode;
+        displayName?: string;
+    };
+};

package/bpk-component-ai-blurb/src/common-types.js

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

package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+type AriaLiveDemoProps = {
+    preamble?: ReactElement | null;
+    children: ReactElement;
+    className?: string | null;
+    style?: {};
+    visible?: Boolean;
+    [rest: string]: any;
+};
+declare const AriaLiveDemo: ({ children, className, preamble, style, visible, ...rest }: AriaLiveDemoProps) => import("react/jsx-runtime").JSX.Element;
+export default AriaLiveDemo;

package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.js

@@ -0,0 +1,48 @@
+/*
+ * 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 { ARIA_LIVE_POLITENESS_SETTINGS } from '..';
+import { cssModules } from "../../bpk-react-utils";
+import BpkAriaLive from "./BpkAriaLive";
+import STYLES from "./BpkAriaLive.stories.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const AriaLiveDemo = ({
+  children,
+  className = null,
+  preamble = null,
+  style = undefined,
+  visible = false,
+  ...rest
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-storybook-aria-live-demo', className),
+  style: style,
+  children: [/*#__PURE__*/_jsx("p", {
+    children: /*#__PURE__*/_jsx("strong", {
+      children: "ARIA live region:"
+    })
+  }), /*#__PURE__*/_jsx("p", {
+    children: visible ? 'This content is relevant to everyone, not just assistive technologies, so it is permanently visible.' : 'This would usually be visually hidden, and only visible to assistive technologies. It is visible here for demo purposes.'
+  }), preamble, /*#__PURE__*/_jsx(BpkAriaLive, {
+    ...rest,
+    visible: true,
+    politenessSetting: ARIA_LIVE_POLITENESS_SETTINGS.assertive,
+    children: children
+  })]
+});
+export default AriaLiveDemo;

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

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

package/bpk-component-layout/src/commonProps.d.ts

@@ -1,6 +1,6 @@
-import type { AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { AriaAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
 import type { BpkLayoutBackgroundColor } from './backgroundColors';
-import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
+import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkPositionKeyword, BpkOverflowValue, BpkZIndexValue, BpkResponsiveValue } from './tokens';
 import type { TextColor, TextStyle } from '../../bpk-component-text';
 /**
  * Common spacing-related props shared by all Backpack layout components
@@ -46,14 +46,20 @@ export interface BpkSpacingProps {
  *   container patterns (e.g. clickable cards, landmark regions).
  * - BpkBox additionally exposes onFocus and onBlur on its own props type.
  */
-export interface BpkCommonLayoutProps extends BpkSpacingProps {
+export interface BpkCommonLayoutProps extends BpkSpacingProps, AriaAttributes {
     className?: never;
     style?: never;
+    id?: string;
     tabIndex?: number;
     role?: AriaRole;
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     textStyle?: BpkResponsiveValue<TextStyle>;
+    position?: BpkResponsiveValue<BpkPositionKeyword>;
+    overflow?: BpkResponsiveValue<BpkOverflowValue>;
+    overflowX?: BpkResponsiveValue<BpkOverflowValue>;
+    overflowY?: BpkResponsiveValue<BpkOverflowValue>;
+    zIndex?: BpkZIndexValue;
     'data-testid'?: string;
     'data-cy'?: string;
     color?: TextColor;

package/bpk-component-layout/src/tokenUtils.js

@@ -41,7 +41,9 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
     // Flex container props
     'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignContent',
     // Grid container props
-    'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
+    'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
     // Flex item props
     'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'order', 'alignSelf', 'justifySelf',
@@ -50,22 +52,28 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap'],
+    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
+    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
     // Used when placing the grid itself within a parent grid.
     'gridColumn', 'gridRow']
   },
   BpkGridItem: {
-    container: ['textStyle']
+    container: ['textStyle', 'position', 'overflow', 'overflowX', 'overflowY']
   },
   // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: ['textStyle', ...StackOptionKeys]
+    container: ['textStyle', ...StackOptionKeys,
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY']
   }
 };
 export const BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT = {
@@ -101,7 +109,15 @@ function filterToAllowlist(props, allowlist) {
 export function processBpkComponentProps(props, options) {
   const processed = processBpkProps(props);
   const allowlist = BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT[options.component];
-  const responsiveSource = options.responsiveProps ? filterToAllowlist(options.responsiveProps, allowlist) : filterToAllowlist(processed, allowlist);
+  // When responsiveProps is provided (e.g. BpkFlex maps direction→flexDirection),
+  // merge it with any allowlisted props already in `processed` (e.g. position/overflow
+  // that come in via ...props and are NOT included in responsiveProps).
+  // responsiveProps takes precedence so that explicit prop-name mappings always win.
+  const processedAllowlisted = filterToAllowlist(processed, allowlist);
+  const responsiveSource = options.responsiveProps ? {
+    ...processedAllowlisted,
+    ...filterToAllowlist(options.responsiveProps, allowlist)
+  } : processedAllowlisted;
   if (Object.keys(responsiveSource).length === 0) {
     return processed;
   }

package/bpk-component-layout/src/tokens.d.ts

@@ -47,10 +47,24 @@ export type BpkBreakpointValue = BpkBreakpointToken;
  */
 export type BpkSizeValue = `${number}rem` | `${number}%` | 'auto' | 'full' | 'fit-content';
 /**
- * Helper type for position props that can use rem or percentages.
- * We intentionally do not allow semantic values like 'auto' here.
+ * Helper type for position props that can use rem, percentages, or bare zero.
+ * CSS allows `0` without a unit; `'0'` is therefore an explicit allowed value.
+ * We intentionally do not allow other semantic values like 'auto' here.
  */
-export type BpkPositionValue = `${number}rem` | `${number}%`;
+export type BpkPositionValue = `${number}rem` | `${number}%` | '0';
+/**
+ * CSS `position` property keyword values.
+ */
+export type BpkPositionKeyword = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+/**
+ * CSS `overflow` property keyword values.
+ */
+export type BpkOverflowValue = 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+/**
+ * CSS `z-index` values. Numeric values only; 'auto' is also permitted.
+ * Avoid magic numbers — prefer a shared z-index scale in your app.
+ */
+export type BpkZIndexValue = number | 'auto';
 /**
  * Helper type for flex-basis prop that can use rem, percentages or semantic values.
  * Excludes 'px' values to enforce design system constraints.

package/bpk-component-layout/src/tokens.js

@@ -71,8 +71,22 @@ export const BpkBreakpointToChakraKey = {
  */
 
 /**
- * Helper type for position props that can use rem or percentages.
- * We intentionally do not allow semantic values like 'auto' here.
+ * Helper type for position props that can use rem, percentages, or bare zero.
+ * CSS allows `0` without a unit; `'0'` is therefore an explicit allowed value.
+ * We intentionally do not allow other semantic values like 'auto' here.
+ */
+
+/**
+ * CSS `position` property keyword values.
+ */
+
+/**
+ * CSS `overflow` property keyword values.
+ */
+
+/**
+ * CSS `z-index` values. Numeric values only; 'auto' is also permitted.
+ * Avoid magic numbers — prefer a shared z-index scale in your app.
  */
 
 /**
@@ -131,7 +145,9 @@ export function isValidSizeValue(value) {
  * @returns {boolean} True if the value is a valid rem or percentage
  */
 export function isValidPositionValue(value) {
-  return /^-?\d+(\.\d+)?rem$/.test(value) ||
+  return value === '0' ||
+  // bare zero — valid CSS without a unit
+  /^-?\d+(\.\d+)?rem$/.test(value) ||
   // rem values
   isPercentage(value) // percentage values
   ;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.d.ts

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import type { ReactElement } from 'react';
+type Props = {
+    children: Array<ReactElement<any, any>> | ReactElement<any, any>;
+};
+declare const SpinnerLayout: {
+    (props: Props): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default SpinnerLayout;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.js

@@ -0,0 +1,47 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { Children } from 'react';
+import { cssModules } from "../../bpk-react-utils";
+import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./SpinnerLayout.story-helpers.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const SpinnerLayout = props => {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-spinner-layout'),
+    children: Children.map(children, child => {
+      const classNames = [getClassName('bpk-spinner-layout__spinner')];
+      if (child.props.type === SPINNER_TYPES.light) {
+        classNames.push(getClassName('bpk-spinner-layout__spinner--light'));
+      }
+      return /*#__PURE__*/_jsx("div", {
+        className: classNames.join(' '),
+        children: child
+      });
+    })
+  });
+};
+SpinnerLayout.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default SpinnerLayout;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.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-spinner-layout{display:flex;flex-direction:column}.bpk-spinner-layout__spinner{display:flex;padding:1.5rem;justify-content:center}.bpk-spinner-layout__spinner--light{background-color:#05203c;border-radius:.25rem}

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

package/bpk-mixins/_focus-indicator-v2.scss

@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+@use 'tokens';
+
+////
+/// @group focus-indicator-v2
+////
+
+/// V2 focus indicator — base/mobile style.
+/// Applies an accent-coloured outline suitable for inputs, buttons and calendar elements.
+///
+/// @example scss
+///   .selector {
+///     &:focus-visible {
+///       @include bpk-focus-indicator-v2();
+///     }
+///   }
+
+@mixin bpk-focus-indicator-v2 {
+  border-color: tokens.$bpk-core-accent-day;
+  outline-color: tokens.$bpk-core-accent-day;
+  outline-style: auto;
+}
+
+/// V2 focus indicator — desktop enhanced style.
+/// Applies an inset focus ring with a canvas-coloured box-shadow gap for higher
+/// visibility on desktop viewports. Typically combined with `bpk-focus-indicator-v2`.
+///
+/// @example scss
+///   .selector {
+///     &:focus-visible {
+///       @include bpk-focus-indicator-v2();
+///
+///       @include breakpoints.bpk-breakpoint-above-mobile {
+///         @include bpk-focus-indicator-v2-desktop();
+///       }
+///     }
+///   }
+
+@mixin bpk-focus-indicator-v2-desktop {
+  outline-color: tokens.$bpk-core-accent-day;
+  outline-offset: calc(-1 * tokens.bpk-spacing-sm() * 0.75);
+  outline-style: solid;
+  outline-width: tokens.bpk-spacing-sm();
+  box-shadow: 0 0 0 calc(tokens.$bpk-one-pixel-rem * 2) tokens.$bpk-canvas-day;
+}
+
+/// V2 focus indicator — desktop reset.
+/// Resets the desktop inset focus styles so that the base/mobile indicator is
+/// restored. Useful inside mobile-specific breakpoint overrides.
+///
+/// @example scss
+///   .selector {
+///     &:focus-visible {
+///       @include bpk-focus-indicator-v2();
+///       @include bpk-focus-indicator-v2-desktop();
+///
+///       @include breakpoints.bpk-breakpoint-mobile {
+///         @include bpk-focus-indicator-v2-desktop-reset();
+///       }
+///     }
+///   }
+
+@mixin bpk-focus-indicator-v2-desktop-reset {
+  outline-offset: 0;
+  outline-style: auto;
+  outline-width: initial;
+  box-shadow: none;
+}

package/bpk-mixins/_index.scss

@@ -23,6 +23,7 @@
 @forward 'buttons';
 @forward 'cards';
 @forward 'chips';
+@forward 'focus-indicator-v2';
 @forward 'forms';
 @forward 'icons';
 @forward 'layers';

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.6.0",
+  "version": "42.8.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^24.1.0",
+    "@skyscanner/bpk-foundations-web": "^24.4.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",