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

package/CHANGELOG.md

@@ -14,6 +14,12 @@ next major.
 
 ### Added
 
+- **`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.
+
 - **Dark mode.** `PixelizeThemeProvider` (defaults to `system`), `useThemeMode`, `ThemeSwitcher`.
   Dark palettes are derived per brand from that brand's own light palette, so brand hue carries
   through. `withTheme` stays light-only, so existing apps are visually unchanged — dark is opt-in.
@@ -37,6 +43,11 @@ next major.
 
 ### Changed
 
+- **`SideBar` sizing is one scale.** Rail, submenu, collapsed flyout and `SecondaryBar` rows now all
+  read `SIDEBAR_ROW`, so every nav label is 13px at every level. Visible changes: submenu and flyout
+  rows grow 20px → 28px with their labels 12/12.5px → 13px, the "Add New" label 12.5px → 13px, and
+  `SecondaryBar`'s `headerFontSize`/`itemFontSize` defaults 0.75rem → 13px. Child rows previously
+  rendered a step smaller than their parent; pass the `SecondaryBar` font props to keep the old size.
 - **Charts are lazy.** `react-apexcharts` now loads behind a dynamic `import()`. The main chart
   entry dropped from 227,454 B to 2,448 B gzip, and an app that never renders a chart no longer
   pays for one. Verified against real ESM build output.
@@ -52,6 +63,70 @@ 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
+  `calc(radii.lg - TRACK_PADDING)`, and a test gates the relationship.
+- **Every field's focus ring was too heavy.** Fields reused the button ring — a 2px surface halo
+  plus a 2px brand band — outside a 1px border that also turns brand on focus, so a focused field
+  was ringed by 5px of chrome reading as one fat stroke. Narrowing and fading that band did not fix
+  it: a `0 0 0 Npx` shadow has a hard outer edge at every opacity, and beside a same-hue border it
+  always merges into one thick stroke. Fields now draw `focusGlowShadow` as a **blurred bloom** —
+  `0 0 6px -1px primary.opacity[32]` — with the border still turning `primary[500]` as the
+  accessible 3:1 indicator. Buttons, chips, checkboxes and every borderless control keep the
+  two-tone ring unchanged.
+- **The Switch demo's "brand-filled bar" was pale in dark mode.** It hardcoded `primary[700]`,
+  which is deep in light and pale in dark, so the bar inverted and the whole comparison was
+  unreadable. It now derives the bar from `resolveFilledSurface(...).activeFill` and **measures**
+  both contrast ratios live against the active brand and mode, instead of printing two numbers that
+  were only ever true in light mode. `segmentedTrackSurface`, `segmentedRestInk` and
+  `segmentedFocusShadow` are now one shared module, so the demo, the component and the contrast
+  gate cannot drift apart.
+- **`SegmentedControl` on a brand-filled bar was unreadable mud.** `brandSlide`'s track is an 8%
+  brand tint, which on a brand bar composites straight back into the bar — the control lost its
+  own surface and the labels had nothing to sit on. With `surface` the track is now an opaque
+  plate (`surfaceRaised`) carrying a 1px inset edge lifted to 3:1 against the bar, because in dark mode
+  the plate and the bar can sit at nearly the same lightness (1.56:1 on radiant) and hue alone
+  would not separate them. The `/switch` demo shows the control instead of a pass/fail ratio pair.
+- **`Tabs` drew a focus ring that was clipped into two arcs.** `TabList` scrolls, so the outer
+  two-tone ring was cut off on all four sides and rendered as two disconnected side edges rather
+  than a ring. The tab now draws it inside itself (`outline-offset: -2px`), clear of the `outline`
+  variant's own border, in an ink lifted to 3:1 against that tab's own surface.
+- **`SegmentedControl` / `Switch` drew the button's focus ring.** A segment sits inside a track, so
+  the ring's surface-toned halo painted a white band and both bands landed outside the pill — a
+  thick double border that overflowed the track. A radiogroup is also a single tab stop, so ringing
+  one segment says nothing the selection does not already say. The **group** now carries the
+  indicator, in the same language as a focused field: a 1px brand hairline inset on the track plus
+  `focusGlowShadow`. `underlineSlide` has no track chrome, so there the segment wears it.
+  `ThemeSwitcher`'s mode segments follow the same rule through their own border.
+- **`Switch` clipped long labels.** Its 12.5rem width was fixed, so labels wider than the track
+  overflowed the background; it is now a minimum. `SegmentedControl`'s track carries
+  `minW="max-content"` for the same reason.
+- **`ThemeSwitcher` had no visible focus indicator.** All four controls used Chakra's `boxShadow:
+  "outline"` token, which resolves to a fully transparent shadow under these brand themes — keyboard
+  focus was invisible. They now use the library's own rings.
+- **Four fields never used the shared focus style.** `PinInput`, `VerifyEmailOtp`, the
+  `CalendarPanel` month/year selects and the `FilterSidebar` search box each hand-rolled a focus
+  shadow (the last one suppressed it entirely with `boxShadow: "none"`). All four now read
+  `fieldFocusVisible`, so the library has one field focus treatment rather than five.
+- `SearchSelect` drew its placeholder over the selected chips. The search input is `flex: 1`
+  with `minW: 0`, so a field holding chips shrinks it to near-zero and the placeholder text
+  overflowed across them. The placeholder is now the empty-state hint only — it is dropped as
+  soon as anything is selected, open or closed.
+- `Select`'s popup panel truncated long option labels. It no longer inherits the trigger width
+  (`matchWidth`); it grows to `max-content` above a measured trigger-width floor, capped at
+  `min(24rem, 100vw - 2rem)`.
 - `usePrefersReducedMotion` crashed during SSR — it now guards `window.matchMedia`. Affected
   `Tabs`, `Toaster` and `SideBar`.
 - `MediaViewer` coalesced several navigation calls landing in the same tick, so six rapid arrow

package/COMPONENT-GOTCHAS.md

@@ -11,6 +11,28 @@ so it's available without checking out the library's source repo. Its companion
 
 ---
 
+## A colour rung flips direction between light and dark
+
+`colors.primary[700]` is a deep purple in light mode and a **pale** lavender in dark. The scales are
+ordered so a high rung always contrasts with the page canvas, which means its lightness inverts
+with the mode. Using one as ink is what the ordering is for; using one as a **background fill**
+gives you a dark bar in light mode and a pale one in dark, with whatever you put on top now
+unreadable.
+
+```tsx
+// Wrong — pale lavender bar in dark mode, and the label on it is unreadable
+<Box bg={colors.primary[700]}>…</Box>
+
+// Right — a brand fill that stays a brand fill, with its own guaranteed-AA foreground
+const brand = resolveFilledSurface(colors.primary, colors);
+<Box bg={brand.activeFill} color={brand.activeColor}>…</Box>
+```
+
+`resolveFilledSurface` is exported from the package root. Use `.fill`/`.color` for a standard
+brand surface and `.activeFill`/`.activeColor` for a deeper one behind other content.
+
+---
+
 ## Choosing between components
 
 ### Segmented control look — `SegmentedControl` / `Toggle/TableToggle`
@@ -27,6 +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.
 
+**`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).
+
+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]} />   // optional: sharpens the plate's edge
+</Box>
+```
+
 ### 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:
@@ -80,17 +119,27 @@ is now the library's own themed component, with a real dual-thumb mode and a `ma
 **Apply:** for a numeric/range form control import `RangeSlider` from the package root — never
 `Slider`, and no longer from the `Primitives` barrel, which no longer carries it.
 
-### Which "switch" — `ToggleSwitch` / `SegmentedControl` / `InputSwitch` / `Switch`
+### Which "switch" — `ToggleSwitch` / `SegmentedControl` / `Tabs` / `InputSwitch` / `Switch`
 
 | Choosing | Component | Why |
 | --- | --- | --- |
 | A real on/off toggle | `ToggleSwitch` | `role="switch"` + `aria-checked`, full keyboard support |
 | One of 2-5 named options | `SegmentedControl` | `role="radiogroup"`, keyboard-navigable, supports per-option disabling |
+| Switching between views or panels | `Tabs` | `role="tablist"` + `aria-controls`, count badges, lazy panels, vertical orientation |
 | *(avoid)* | `InputSwitch` | `@deprecated` — now a thin wrapper that renders `ToggleSwitch` |
 | *(avoid)* | `Switch` | `@deprecated` — a mouse-only two-label segmented control (`leftText`/`rightText`); use `SegmentedControl` |
 
 **Apply:** "on vs off" is always `ToggleSwitch`; 2+ named options is always `SegmentedControl`.
 
+**`SegmentedControl` and `Tabs` look near-identical and are not interchangeable.** They share the
+size scale and tokens, so `SegmentedControl variant="underlineSlide"` and `Tabs variant="line"`
+render almost the same picture, as do `variant="default"` and `Tabs variant="subtle"`. The
+difference is what the control *is*: `SegmentedControl` is a **radiogroup** — it filters or sets a
+value and owns nothing else on the page; `Tabs` is a **tablist** — it shows one of several panels
+and wires `aria-controls` to them. Pick by that, never by the picture. A screen reader announces
+"radio 1 of 3" versus "tab 1 of 3, selected", and only `Tabs` gives you panels, count badges,
+`isLazy` and `orientation="vertical"`.
+
 ### Circular charts — `ApexPieChart` vs `ApexPolarCharts`
 
 | Need | Component | Why not the other |
@@ -727,6 +776,14 @@ nothing. `colorScheme` and `isReadOnly` are real now (colorScheme used to be sil
 `variant`/`spacing`/`isFocusable` stay typed `@deprecated` no-ops. **Apply:** migrate to
 `ToggleSwitch` (`fieldLabel` for the label InputSwitch drew above the track) and drop those selectors.
 
+**This breaks tests, not types.** Chakra's `Switch` rendered `role="checkbox"`; `ToggleSwitch`
+renders the correct `role="switch"`, so `getByRole("checkbox", { name })` silently stops matching
+while everything still compiles. Two consumer repos hit this on the beta.44 upgrade. **Apply:**
+change those queries to `getByRole("switch", …)`.
+
+Same shape of trap on `Tabs`: the owned `Tab` forwards no `data-testid`, so `getByTestId("…-tab-…")`
+queries must become `getByRole("tab", { name })`.
+
 ### The internal `Input.tsx` silently ignores six declared props
 
 `disabled`, `autoComplete`, `autoFocus`, `inputClassName`, `labelClassName`, and `errorClassName`

package/dist/Components/Common/fieldStyles.d.ts

@@ -55,6 +55,6 @@ export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, foc
     borderRadius: string;
     transition: string;
 };
-/** Focus ring for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
 export declare const fieldFocusRing: (theme: CustomThemeProps, error?: boolean) => string;
 export {};

package/dist/Components/Common/fieldStyles.js

@@ -50,7 +50,7 @@ const fieldControlStyles = (colors) => {
         ...(0, exports.fieldTextStyles)(colors),
         _placeholder: { color: (0, placeholderInk_1.placeholderInk)(colors), opacity: 1 },
         _hover: { borderColor: (0, exports.fieldHoverBorder)(colors) },
-        _focusVisible: { borderColor: colors.primary[500], ...(0, focusRing_styles_1.focusVisibleRing)(colors) },
+        _focusVisible: { borderColor: colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(colors) },
         _invalid: {
             borderColor: colors.semanticText.error,
             _hover: { borderColor: colors.semanticText.error },
@@ -68,13 +68,13 @@ const getFieldStateStyles = (theme, { error = false, focused = false, disabled =
         : focused
             ? colors.primary[500]
             : colors.boxborder[500];
-    const box = { ...(0, exports.fieldBoxStyles)(colors), borderColor, boxShadow: focused ? (0, focusRing_styles_1.focusRingShadow)(colors) : "none" };
+    const box = { ...(0, exports.fieldBoxStyles)(colors), borderColor, boxShadow: focused ? (0, focusRing_styles_1.focusGlowShadow)(colors) : "none" };
     if (!disabled)
         return box;
     const { bg, borderColor: disabledBorder, cursor } = disabledStyles(colors);
     return { ...box, bg, borderColor: disabledBorder, cursor };
 };
 exports.getFieldStateStyles = getFieldStateStyles;
-/** Focus ring for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
-const fieldFocusRing = (theme) => (0, focusRing_styles_1.focusRingShadow)(theme.colors);
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+const fieldFocusRing = (theme) => (0, focusRing_styles_1.focusGlowShadow)(theme.colors);
 exports.fieldFocusRing = fieldFocusRing;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -11,6 +11,7 @@ const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const dayStates_1 = require("./dayStates");
 /** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
@@ -41,11 +42,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         bg: theme.colors.background[50],
         outline: "none",
         _hover: { borderColor: theme.colors.primary[300] },
-        _focus: {
-            outline: "none",
-            borderColor: theme.colors.primary[500],
-            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
-        },
+        _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) },
         style: {
             WebkitAppearance: "menulist",
             MozAppearance: "menulist",

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -4,12 +4,10 @@ exports.default = VerifyEmailOtp;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const lucide_react_1 = require("lucide-react");
 /** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
 function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -13,6 +13,7 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filterHoverStyle_1 = require("./filterHoverStyle");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
 // headerPadding = 2,
 panelPadding = 3, clearAllButton = true, onClearAllHandler,
@@ -173,7 +174,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
                                         })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
                         // NOTE: boxborder[500] not gray[200] — WCAG 1.4.11 needs >=3:1 for a control boundary; gray[200] fails in dark.
-                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
+                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, value: searchTerms[section.id] || "", onChange: (e) => {
                             const v = e.target.value;
                             setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
                             if (v)

package/dist/Components/Header/HeaderActions.d.ts

@@ -9,6 +9,8 @@ declare const HeaderActions: ({ select, edit, create, surface, }: {
         selectPlaceholderText?: string;
         /** Accessible name for the select; defaults to the placeholder text. */
         ariaLabel?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
         width?: string;
         value?: string;
     };

package/dist/Components/Header/HeaderActions.js

@@ -13,14 +13,14 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
 const HeaderActions = ({ select, edit, create, surface, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     const ink = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, accentText_1.AA_NORMAL_TEXT);
     const iconInk = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, outlineRung_1.AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
-        elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": (_d = (_c = select.ariaLabel) !== null && _c !== void 0 ? _c : select.selectPlaceholderText) !== null && _d !== void 0 ? _d : "Select", onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
+        elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
         elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));

package/dist/Components/Input/TextInput.styles.js

@@ -13,7 +13,7 @@ const fieldPartStyles = (colors) => {
             borderColor: error,
             boxShadow: "none",
             _hover: { borderColor: error },
-            _focusVisible: { borderColor: error, ...(0, focusRing_styles_1.focusVisibleRing)(colors) },
+            _focusVisible: { borderColor: error, ...(0, focusRing_styles_1.fieldFocusVisible)(colors) },
         },
     };
 };

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -13,6 +13,6 @@ const Button_1 = __importDefault(require("../../Button/Button"));
 /** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 exports.default = KanbanActions;

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -90,6 +90,8 @@ export type KanbanBoardProps = {
         width?: string;
         /** Controlled value passed straight to the underlying Select. */
         value?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
     };
     /** Button shows only when this `isEditable` AND `permissions.isEditable` (default true) both allow it. */
     kanbanEdit?: {

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,2 +1,2 @@
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, addOnBlur, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -25,7 +25,7 @@ const generateUniqueId = (() => {
         return `${Date.now()}-${counter}`;
     };
 })();
-function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = controlSizes_1.DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
+function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, addOnBlur = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || controlSizes_1.DEFAULT_CONTROL_SIZE));
     const options = value;
@@ -43,23 +43,34 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
     };
+    const commitInput = (0, react_1.useCallback)(() => {
+        const entry = inputValue.trim();
+        if (entry === "")
+            return;
+        if (!validateEmail(entry)) {
+            setLocalError("Invalid email address");
+            return;
+        }
+        if (!options.some((option) => option.label === entry)) {
+            onValueChange([...options, { id: generateUniqueId(), label: entry }]);
+        }
+        setInputValue("");
+    }, [inputValue, options, onValueChange]);
     const handleKeyDown = (e) => {
-        if (e.key === "Enter" && inputValue.trim() !== "") {
-            if (!validateEmail(inputValue)) {
-                setLocalError("Invalid email address");
+        if (e.key === "Enter") {
+            if (inputValue.trim() === "")
                 return;
-            }
-            const existingOption = options.find((option) => option.label === inputValue);
-            if (!existingOption) {
-                const newOption = { id: generateUniqueId(), label: inputValue };
-                onValueChange([...options, newOption]);
-                setInputValue("");
-            }
+            e.preventDefault();
+            commitInput();
         }
         else if (e.key === "Backspace" && inputValue === "") {
             onValueChange(options.slice(0, -1));
         }
     };
+    const handleBlur = (0, react_1.useCallback)(() => {
+        if (addOnBlur && !isReadOnly && !isDisabled)
+            commitInput();
+    }, [addOnBlur, isReadOnly, isDisabled, commitInput]);
     const handleRemove = (0, react_1.useCallback)((optionToRemove) => {
         onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
@@ -72,5 +83,5 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
                 }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: (0, placeholderInk_1.placeholderInk)(theme.colors), opacity: 1 }, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
-                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: options.length === 0 ? placeholderText : "" })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -14,6 +14,8 @@ export type MultiSelectProps = {
     placeholderText?: string;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    /** Also commits the typed email when the field loses focus, not just on Enter. Defaults to false. */
+    addOnBlur?: boolean;
     /** Marks the field invalid (`aria-invalid` + error border) and swaps `helperText` for `errorMessage`; a rejected email sets this internally too. */
     error?: boolean;
     /** Height on the shared control scale (xs 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */

package/dist/Components/NotificationBell/notificationHelpers.d.ts

@@ -13,8 +13,11 @@ export interface DaySectionLabels {
     earlier: string;
 }
 export declare const DEFAULT_DAY_LABELS: DaySectionLabels;
-/** Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket. */
-export declare function sectionizeByDay<T>(rows: T[], getTime: (row: T) => number | string | Date, labels?: DaySectionLabels): DaySection<T>[];
+/**
+ * Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket.
+ * `now` defaults to the wall clock; pass it to pin "today" in tests or a fixed-date view.
+ */
+export declare function sectionizeByDay<T>(rows: T[], getTime: (row: T) => number | string | Date, labels?: DaySectionLabels, now?: number | Date): DaySection<T>[];
 /** Merges only adjacent rows sharing a key; a null/undefined key never merges with anything. */
 export declare function groupConsecutive<T>(rows: T[], getKey: (row: T) => string | null | undefined): ConsecutiveGroup<T>[];
 /** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */

package/dist/Components/NotificationBell/notificationHelpers.js

@@ -21,10 +21,19 @@ const toDate = (value) => {
     return new Date(/^-?\d+$/.test(value) ? Number(value) : value);
 };
 const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
-/** Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket. */
-function sectionizeByDay(rows, getTime, labels = exports.DEFAULT_DAY_LABELS) {
-    const todayStart = startOfDay(new Date());
-    const yesterdayStart = todayStart - 24 * 60 * 60 * 1000;
+// NOTE: calendar arithmetic, not -24h — a DST shift makes the day shorter or longer.
+const startOfPrevDay = (dayStart) => {
+    const d = new Date(dayStart);
+    d.setDate(d.getDate() - 1);
+    return startOfDay(d);
+};
+/**
+ * Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket.
+ * `now` defaults to the wall clock; pass it to pin "today" in tests or a fixed-date view.
+ */
+function sectionizeByDay(rows, getTime, labels = exports.DEFAULT_DAY_LABELS, now = Date.now()) {
+    const todayStart = startOfDay(toDate(now));
+    const yesterdayStart = startOfPrevDay(todayStart);
     const today = [];
     const yesterday = [];
     const earlier = [];

package/dist/Components/PinInput/PinInput.js

@@ -7,6 +7,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const pinInputCellSize_1 = require("./pinInputCellSize");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 /** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
 function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }) {
     var _a;
@@ -15,8 +16,5 @@ function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBor
     // Square cells at the same heights every other field uses — Chakra's own PinInput size
     // scale doesn't line up with the library's, so cells are sized directly.
     const cell = (0, pinInputCellSize_1.pinInputCellSize)(size);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { role: "group", "aria-label": fieldName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { role: "group", "aria-label": fieldName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) })] }));
 }

package/dist/Components/SearchSelect/SearchSelect.js

@@ -521,7 +521,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             }, onBlur: () => {
                                 setFocused(false);
                                 setFocusedTrigger((prev) => (prev === "input" ? null : prev));
-                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, placeholder: selectedValues.length ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },

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

@@ -1,3 +1,3 @@
 import { SegmentedControlProps } from "./SegmentedControlProps";
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-export default function SegmentedControl<T extends string = string>({ options, value, onChange, size, isFullWidth, variant, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SegmentedControl<T extends string = string>({ options, value, onChange, size, isFullWidth, variant, surface, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;