pixelize-design-library 2.4.2-beta.45 → 2.4.2-beta.46

package/CHANGELOG.md

@@ -14,10 +14,9 @@ next major.
 
 ### Added
 
-- **`SegmentedControl` / `Switch` — `surface`.** The background the control is drawn on. Unselected,
-  selected and hover inks are re-aimed at it; without it they are measured against the page canvas,
-  so a control on a brand-filled bar renders its inactive label at 1.0–2.0:1. Defaults to the page
-  canvas, so existing call sites are unchanged.
+- **`SegmentedControl` / `Switch` — `surface`.** The background the control is drawn on. Optional:
+  the track is an opaque plate on any backdrop, so the labels read without it. Pass it to aim the
+  plate's hairline edge at the real backdrop rather than at the page canvas.
 - **`MultiSelect` — `addOnBlur`.** Commits the typed address on focus-out as well as on Enter.
   Defaults to `false`, so existing call sites keep Enter-only behaviour.
 
@@ -64,6 +63,17 @@ next major.
 
 ### Fixed
 
+- **`SegmentedControl` / `Switch` guessed the backdrop it was drawn on.** `brandSlide` painted an
+  8% brand tint composited over `backgroundColor.main` and lifted its unselected-label ink against
+  that same assumed canvas, so on a brand-filled bar the tint sank into the bar and the label
+  measured **1.03–2.03:1 across all 9 brands x 2 modes** — crm's `Overview / Timeline` view switcher
+  on a `primary[700]` bar was unreadable. The track is now an opaque plate on every backdrop: rest
+  ink 7.58–18.39:1, plate-vs-bar 6.31–19.0:1, with no change required at the call site. `surface`
+  is now only a refinement for the plate's hairline edge, and a test gates the invariant.
+- **A selected `Select` option stacked brand ink on a brand-tinted row.** Bold `accentText` on
+  `listRowBackgrounds().selected` read as muddy, and the row cleared the panel by only 1.16–1.29:1.
+  The label is now `text[900]` with the brand carried by a trailing check, matching `OrgSwitcher`.
+
 - **`SegmentedControl`'s pill bulged past the plate's corners.** The pill and the segments carried
   the track's own `lg` radius while sitting 2px inside it, so the plate's band stayed even along the
   straight edges but pinched to nothing at the corners. They now round concentrically at

package/COMPONENT-GOTCHAS.md

@@ -49,27 +49,23 @@ opt-in, never assume a non-default look).
 Pick by density and emphasis, not by taste. When unsure, or migrating an existing call site, leave
 it on `"default"` — it's the only variant guaranteed to match previously-shipped screenshots.
 
-**On a coloured bar, pass `surface`.** `SegmentedControl` (and `Switch`, which renders it) cannot
-read the background its parent painted, so without `surface` it assumes the **page canvas**. Drop one
-into a brand-filled header and two things go wrong: `brandSlide`'s 8% tint composites into the bar,
-so the track stops reading as a control at all, and the inactive label — measured against the canvas
-— lands at **1.0–2.0:1**: technically rendered, effectively invisible.
+**`brandSlide` no longer guesses its backdrop — and `surface` is now optional.** Until
+2.4.2-beta.46 the track was an 8% brand tint composited over the **page canvas**, and the inactive
+label's ink was lifted against that same assumed canvas. Dropped into a brand-filled header both
+went wrong at once: the tint sank into the bar, and the label landed at **1.03–2.03:1** — rendered,
+effectively invisible. The track is now an opaque plate (`colors.surfaceRaised`) whatever it sits
+on, so a control on a coloured bar is readable with no prop passed (rest ink 7.58–18.39:1).
 
-Given `surface`, the `brandSlide` track becomes an **opaque plate** (`colors.surfaceRaised`) with a
-1px edge lifted to 3:1 against the bar, and every label's ink is re-aimed at that plate. The edge is
-what carries the boundary: in dark mode the plate and a brand bar can sit at almost the same
-lightness (as low as 1.56:1 on radiant), so hue alone would not separate them.
+Pass `surface` only to aim the plate's 1px edge at the real backdrop instead of the page canvas.
+The edge is what carries the boundary: in dark mode the plate and a brand bar can sit at almost the
+same lightness (as low as 1.56:1 on radiant), so hue alone would not separate them.
 
 ```tsx
 <Box bg={theme.colors.primary[700]}>
-  <Switch ... surface={theme.colors.primary[700]} />   // 1.24:1 -> 4.54:1
+  <Switch ... surface={theme.colors.primary[700]} />   // optional: sharpens the plate's edge
 </Box>
 ```
 
-Pass the same value you gave the wrapper's `bg`. It re-aims the unselected, selected and hover inks
-together, and flips direction correctly in dark mode. `HeaderActions` takes `surface` for the same
-reason.
-
 ### Which "select" component — `Select` is the only one to reach for now
 
 There is now **one** picker. `Select` does both modes off the `native` prop:

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -41,7 +41,9 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
     const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
     const focusShadow = (0, segmentedInk_1.segmentedFocusShadow)(colors, trackSurface);
     // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
-    const plateEdge = isBrandSlide && surface ? `inset 0 0 0 1px ${(0, segmentedInk_1.segmentedPlateEdge)(colors, surface)}` : undefined;
+    const plateEdge = isBrandSlide
+        ? `inset 0 0 0 1px ${(0, segmentedInk_1.segmentedPlateEdge)(colors, surface)}`
+        : undefined;
     // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
     const segmentFocus = {
         outline: "2px solid transparent",
@@ -88,7 +90,7 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? (surface ? trackSurface : colors.primary.opacity[8]) : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (node) => {
                         refs.current[index] = node;

package/dist/Components/SegmentedControl/SegmentedControlProps.d.ts

@@ -27,7 +27,7 @@ export type SegmentedControlProps<T extends string = string> = {
     isFullWidth?: boolean;
     /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
     variant?: SegmentedControlVariant;
-    /** Background this sits on. Pass it off the page canvas: brandSlide's track becomes an opaque plate with its own edge, and every label's ink is re-aimed at that plate. */
+    /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
     surface?: string;
     "aria-label": string;
 };

package/dist/Components/SegmentedControl/segmentedInk.d.ts

@@ -1,11 +1,11 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
 import type { SegmentedControlVariant } from "./SegmentedControlProps";
-/** The surface a segment's label really sits on; brandSlide's track is a translucent tint, so composite it. */
+/** The surface a segment's label really sits on. */
 export declare const segmentedTrackSurface: (variant: SegmentedControlVariant, colors: PaletteProps, surface?: string) => string;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export declare const segmentedRestInk: (colors: PaletteProps, trackSurface: string) => string;
 /** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
 export declare const segmentedFocusShadow: (colors: PaletteProps, trackSurface: string) => string;
-/** On a coloured bar the plate can match the bar's lightness, so its edge carries the boundary.
+/** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
-export declare const segmentedPlateEdge: (colors: PaletteProps, surface: string) => string;
+export declare const segmentedPlateEdge: (colors: PaletteProps, surface?: string) => string;

package/dist/Components/SegmentedControl/segmentedInk.js

@@ -2,19 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.segmentedPlateEdge = exports.segmentedFocusShadow = exports.segmentedRestInk = exports.segmentedTrackSurface = void 0;
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
-const color_1 = require("../../Theme/tokens/builders/color");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-/** The surface a segment's label really sits on; brandSlide's track is a translucent tint, so composite it. */
+/** The surface a segment's label really sits on. */
 const segmentedTrackSurface = (variant, colors, surface) => {
-    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     if (variant === "underlineSlide")
-        return canvas;
-    // An 8% tint reads on the page canvas; on a coloured bar it composites into the bar and the
-    // control stops looking like a control, so there the track becomes an opaque plate.
-    if (variant === "brandSlide") {
-        return surface ? colors.surfaceRaised : (0, color_1.compositeOver)(colors.primary.opacity[8], canvas);
-    }
+        return surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    // brandSlide paints an opaque plate on every backdrop: a tint composites into an unknown
+    // parent, so its ink was derived from a canvas the control was not actually on.
+    if (variant === "brandSlide")
+        return colors.surfaceRaised;
     return colors.background[600];
 };
 exports.segmentedTrackSurface = segmentedTrackSurface;
@@ -24,7 +21,7 @@ exports.segmentedRestInk = segmentedRestInk;
 /** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
 const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${(0, outlineRung_1.liftToContrast)(colors.primary[500], trackSurface, outlineRung_1.AA_NON_TEXT)}, ${(0, focusRing_styles_1.focusGlowShadow)(colors)}`;
 exports.segmentedFocusShadow = segmentedFocusShadow;
-/** On a coloured bar the plate can match the bar's lightness, so its edge carries the boundary.
+/** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
-const segmentedPlateEdge = (colors, surface) => (0, outlineRung_1.liftToContrast)(colors.boxborder[500], surface, outlineRung_1.AA_NON_TEXT);
+const segmentedPlateEdge = (colors, surface) => (0, outlineRung_1.liftToContrast)(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);
 exports.segmentedPlateEdge = segmentedPlateEdge;

package/dist/Components/Select/SelectPopup.js

@@ -43,6 +43,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowInk_1 = require("./optionRowInk");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
@@ -80,7 +81,7 @@ const OptionRow = react_1.default.memo(function OptionRow({ option, index, listb
     const isSingleSelected = isSelected && !isMulti;
     const selectedBg = isActive ? backgrounds.selectedActive : backgrounds.selected;
     const restBg = isActive ? backgrounds.active : "transparent";
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSingleSelected ? 600 : 400, color: isSingleSelected ? theme.colors.accentText : theme.colors.text[700], bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSingleSelected ? 600 : 400, color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
 });
 const buildGroupedRows = (options) => {
     const rows = [];

package/dist/Components/Select/optionRowInk.d.ts

@@ -0,0 +1,3 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+export declare const optionRowInk: (colors: PaletteProps, isSingleSelected: boolean) => string;

package/dist/Components/Select/optionRowInk.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionRowInk = void 0;
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];
+exports.optionRowInk = optionRowInk;

package/dist/Components/Switch/SwitchProps.d.ts

@@ -8,7 +8,7 @@ export type SwitchProps = {
     onSwitchToggle: (value: "left" | "right") => void;
     /** Controlled selected side; the pill only moves when this changes. */
     switchActive: "left" | "right";
-    /** Background this sits on. Pass it off the page canvas — on a brand-filled bar the track sinks into the bar and the inactive label is unreadable without it. */
+    /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
     surface?: string;
     /** Names the radiogroup; pass it, as there is no visible group label. */
     "aria-label"?: string;

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -35,7 +35,9 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
     const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
     const focusShadow = segmentedFocusShadow(colors, trackSurface);
     // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
-    const plateEdge = isBrandSlide && surface ? `inset 0 0 0 1px ${segmentedPlateEdge(colors, surface)}` : undefined;
+    const plateEdge = isBrandSlide
+        ? `inset 0 0 0 1px ${segmentedPlateEdge(colors, surface)}`
+        : undefined;
     // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
     const segmentFocus = {
         outline: "2px solid transparent",
@@ -82,7 +84,7 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? (surface ? trackSurface : colors.primary.opacity[8]) : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
+    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 return (_jsxs(Box, { as: "button", type: "button", ref: (node) => {
                         refs.current[index] = node;

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -1,23 +1,20 @@
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
-import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
-/** The surface a segment's label really sits on; brandSlide's track is a translucent tint, so composite it. */
+/** The surface a segment's label really sits on. */
 export const segmentedTrackSurface = (variant, colors, surface) => {
-    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     if (variant === "underlineSlide")
-        return canvas;
-    // An 8% tint reads on the page canvas; on a coloured bar it composites into the bar and the
-    // control stops looking like a control, so there the track becomes an opaque plate.
-    if (variant === "brandSlide") {
-        return surface ? colors.surfaceRaised : compositeOver(colors.primary.opacity[8], canvas);
-    }
+        return surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    // brandSlide paints an opaque plate on every backdrop: a tint composites into an unknown
+    // parent, so its ink was derived from a canvas the control was not actually on.
+    if (variant === "brandSlide")
+        return colors.surfaceRaised;
     return colors.background[600];
 };
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export const segmentedRestInk = (colors, trackSurface) => liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
 /** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
 export const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${liftToContrast(colors.primary[500], trackSurface, AA_NON_TEXT)}, ${focusGlowShadow(colors)}`;
-/** On a coloured bar the plate can match the bar's lightness, so its edge carries the boundary.
+/** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
-export const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface, AA_NON_TEXT);
+export const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, AA_NON_TEXT);

package/dist/esm/Components/Select/SelectPopup.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverContent, Portal, Spinner, useDisclosure, useMergeRefs, } from "@chakra-ui/react";
-import { ChevronDown, X } from "lucide-react";
+import { Check, ChevronDown, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowInk } from "./optionRowInk.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
@@ -42,7 +43,7 @@ const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSe
     const isSingleSelected = isSelected && !isMulti;
     const selectedBg = isActive ? backgrounds.selectedActive : backgrounds.selected;
     const restBg = isActive ? backgrounds.active : "transparent";
-    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSingleSelected ? 600 : 400, color: isSingleSelected ? theme.colors.accentText : theme.colors.text[700], bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: "0.75rem", color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
+    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSingleSelected ? 600 : 400, color: optionRowInk(theme.colors, isSingleSelected), bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: "0.75rem", color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
 });
 const buildGroupedRows = (options) => {
     const rows = [];

package/dist/esm/Components/Select/optionRowInk.js

@@ -0,0 +1,2 @@
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+export const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.45",
+  "version": "2.4.2-beta.46",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",