@skyscanner/backpack-web 42.7.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-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/package.json

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