@skyscanner/backpack-web 41.18.0 → 41.19.0

package/bpk-mixins/_segmented-control.scss

@@ -0,0 +1,263 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens';
+@use 'typography';
+@use 'utils';
+@use 'shadows';
+
+////
+/// @group segmented-control-v2
+////
+
+/// Segmented control group container.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///   }
+
+@mixin bpk-segmented-control-v2 {
+  position: relative;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  border-radius: tokens.$bpk-border-radius-sm;
+  background-color: tokens.$bpk-private-segmented-control-canvas-default-day;
+  overflow: hidden;
+}
+
+/// Canvas default type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--canvas-default();
+///   }
+
+@mixin bpk-segmented-control-v2--canvas-default {
+  background-color: tokens.$bpk-private-segmented-control-canvas-default-day;
+}
+
+/// Canvas contrast type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--canvas-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2--canvas-contrast {
+  background-color: tokens.$bpk-surface-default-day;
+}
+
+/// Surface default type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--surface-default();
+///   }
+
+@mixin bpk-segmented-control-v2--surface-default {
+  background-color: tokens.$bpk-canvas-contrast-day;
+}
+
+/// Surface contrast type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2--surface-contrast {
+  background-color: tokens.$bpk-private-segmented-control-surface-contrast-day;
+}
+
+/// Adds a box shadow to the group container. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--shadow();
+///   }
+
+@mixin bpk-segmented-control-v2--shadow {
+  @include shadows.bpk-box-shadow-sm;
+}
+
+/// Visually hidden group label (satisfies aria-labelledby generated by Ark-UI).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__label();
+///   }
+
+@mixin bpk-segmented-control-v2__label {
+  @include utils.bpk-visually-hidden;
+}
+
+/// Segmented control item (label wrapper).
+/// Creates a grid cell in the root grid, and a stacking context for ItemText + ItemControl.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item();
+///   }
+
+@mixin bpk-segmented-control-v2__item {
+  display: grid;
+  cursor: pointer;
+}
+
+/// Segmented control item control (background layer, aria-hidden).
+/// Sits behind ItemText via CSS grid stacking (grid-area: 1 / 1).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-control();
+///   }
+
+@mixin bpk-segmented-control-v2__item-control {
+  display: none;
+}
+
+/// Segmented control item text (content layer, visible to accessibility tree).
+/// Sits above ItemControl via CSS grid stacking (grid-area: 1 / 1, z-index: 1).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-text();
+///   }
+
+@mixin bpk-segmented-control-v2__item-text {
+  display: flex;
+  z-index: 1;
+  min-height: tokens.bpk-spacing-xl();
+
+  // Content layer: stacked above item-control via shared grid-area
+  grid-area: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  transition: color tokens.$bpk-duration-xs ease-in-out;
+  color: tokens.$bpk-text-primary-day;
+  overflow: hidden;
+  border-inline-start: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day;
+  pointer-events: none;
+
+  @include typography.bpk-label-2;
+
+  // stylelint-disable-next-line selector-max-type
+  svg {
+    fill: currentcolor;
+  }
+
+  &[data-state='checked'] {
+    color: tokens.$bpk-text-on-dark-day;
+  }
+}
+
+/// Surface contrast item text colors. Modifies the bpk-segmented-control-v2__item-text mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__item-text
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-text();
+///     @include bpk-segmented-control-v2__item-text--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__item-text--surface-contrast {
+  color: tokens.$bpk-text-on-dark-day;
+  border-inline-start-color: tokens.$bpk-line-on-dark-day;
+}
+
+/// Segmented control indicator (floating selection background, positioned by Ark-UI CSS variables).
+/// Mirrors ItemControl visually but uses absolute positioning driven by --left/--top/--height
+/// injected by Ark. --transition-duration is set to 0ms to prevent sliding animation.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator {
+  position: absolute;
+  top: var(--top);
+  left: var(--left);
+  width: var(--width);
+  height: var(--height);
+  background-color: tokens.$bpk-core-primary-day;
+
+  --transition-duration: 0ms;
+}
+
+/// Canvas contrast indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--canvas-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--canvas-contrast {
+  background-color: tokens.$bpk-surface-default-day;
+}
+
+/// Surface default indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--surface-default();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--surface-default {
+  background-color: tokens.$bpk-canvas-contrast-day;
+}
+
+/// Surface contrast indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--surface-contrast {
+  background-color: tokens.$bpk-private-segmented-control-surface-contrast-on-day;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.18.0",
+  "version": "41.19.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@ark-ui/react": "^5.34.1",
     "@chakra-ui/react": "^3.33.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",