pixelize-design-library 2.4.2-beta.53 → 2.4.2-beta.55

package/CHANGELOG.md

@@ -81,6 +81,49 @@ next major.
 
 ### Fixed
 
+- **Control-size regression: field and button heights are two scales again, not one.** A
+  form-field-only bump had leaked into `Button`, `SegmentedControl`, `Tabs`, `TableToggle` and
+  `Dropdown`'s trigger through one shared token. `CONTROL_SIZES` (fields/selects: xs 24 · sm 38 ·
+  md 40 · lg 48) and `BUTTON_SIZES` (buttons and every button-like trigger: xs 24 · sm 32 · md 40 ·
+  lg 48, back to pre-regression) are now separate exports, gated by
+  `Common/sizeScaleOwnership.test.ts` so they can't silently merge again. `OPTION_ROW_SIZES`
+  (dropdown/select/menu row heights) is reverted to xs 24 · sm 30 · md 34 · lg 40; `OrgSwitcher`/
+  `AppSwitcher` are back on their own hardcoded literal sizes, not a shared token.
+- **`SideBar`'s nav scrollbar thumb was the brand `primary` color.** Every other scrollbar in the
+  library reads a neutral chrome token; the sidebar's hand-rolled CSS (`Constants/Sidebar.ts`) was
+  the one place still reaching for `primary[500]`/`primary[700]`. It now reads
+  `sidebar.mutedIcon`/`mutedLabel` — contrast-resolved against the rail, not brand-colored.
+- **`SideBar` follow-up UI audit — six more fixes, no behavior/prop changes.** `SecondaryBar`'s own
+  scroll panel had no scrollbar styling (fell through to the page's default) and a hardcoded,
+  collision-prone id — now matches `SideBar`'s own generated-id + `cssForScrollBar` pattern. The
+  collapsed-rail badge dot (`red[400]`) is now `sidebar.semanticText.error`, so it stays legible in
+  both modes instead of drifting. Six `whiteAlpha.100` hover/rest fills (header collapse button,
+  Add New, user footer, inline submenu row, app switcher cell, `SecondaryBar`'s collapse toggle)
+  were below the sidebar's own perceptible-step floor — bumped to `.200`, matching every other row.
+  The collapsed-flyout submenu showed Chakra's built-in "?" glyph for a sub-item with no `icon`; it
+  now draws the same dot the always-visible inline submenu already used. Hovering an *active* flyout
+  row got lighter-then-darker instead of lighter-then-lighter — fixed to the same `.300`→`.400` step
+  every other active row uses. The default (no `logo`/`avatarUrl`) header logo tile and footer
+  avatar initials painted a raw `primary` fill that measured ~1:1 against the rail — invisible — on
+  zinc, skyline and storefront; both now use the same rail-safe surface/ink pairing the active-row
+  accent already resolves against.
+- **`SideBar` audit round 2 — muted-chrome contrast, inline-submenu consistency, demo previews.**
+  `sidebar.mutedIcon`/`mutedLabel` cleared AA against the bare rail and `elevated` but not against
+  a whiteAlpha hover/active overlay on top of either — now resolved with `settleAcross` against
+  both surfaces at once, gated by new `paletteContrast.test.ts` cases across 9 brands x 2 modes.
+  The expanded rail's always-visible inline submenu (`MenuItemBox.tsx`) now matches the
+  fill+accent-bar+`activeAccent.label` pattern the top-level row and the collapsed-flyout submenu
+  already use for an active item, instead of only swapping label color. Demo-only: the playground's
+  docked-sidebar previews (`src/Pages/demo.sidebar.tsx`) rendered blank below the `lg` breakpoint
+  because `SideBar` reads the real `window` width, not the preview box's — now shows a
+  "widen the window" fallback there instead; the secondary-bar demo's panel was also widened so its
+  drill-down chevron isn't clipped.
+- **`Table` clipped its last row(s) whenever a cell wrapped to more than one line.** The container
+  height was computed as `rows × density height + header`, assuming every row is exactly one line —
+  wrapped text (long values, multi-column data) rendered taller than that, and the box clipped it
+  behind a scrollbar even with empty space left on the page. Tables at or under the row-count cap
+  (`maxVisibleRows`, default 10) now grow to fit their real content instead; larger lists keep the
+  exact capped/scrolling height and virtualize as before, so nothing changes for big record counts.
 - **Icons beside a field are centred at every size and height.** A lone right-hand icon in
   `TextInput` (an `inputRightIcon`, the clear button or the password toggle) sat flush against the
   border while the left one was inset; both now mirror at 6/9/12/15px. `SelectSearch`'s `rightIcon`

package/COMPONENT-GOTCHAS.md

@@ -312,7 +312,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 
 | Component | beta.43 → beta.44 | Restore the old look |
 | --- | --- | --- |
-| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (38px). One scale for all: xs 30 / sm 38 / md 42 / lg 48 — the same height in every field, select and button. `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs` | `size="md"` |
+| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (38px). One scale for all: xs 24 / sm 38 / md 40 / lg 48 — the same height in every field, select and button. `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs`. **Since decoupled** — fields/selects now read `CONTROL_SIZES` (unchanged: xs 24 / sm 38 / md 40 / lg 48), `Button`/`SegmentedControl`/`Tabs`/`TableToggle`/`Dropdown`'s trigger read the separate `BUTTON_SIZES` (xs 24 / sm 32 / md 40 / lg 48, back to pre-regression) — see the gotcha below | `size="md"` |
 | `Button` | Text one step smaller (sm 14→13px, md 16→14, lg 18→16). Busy = spinner only, width kept (was "Loading" + spinner). Outline: 1px border, hover is a tint, not a fill | `loadingText="Loading"` |
 | `Tag` | `solid`/`md` → `subtle`/`sm`. Hover + pointer only with `onTagClick`; `maxW` truncates with the full text as a title. Exact heights 20/24/28/32, weight 500, 1px inset ring (never adds height); subtle is a light tint with ink ≥ 6.5:1 | `variant="solid" size="md"` |
 | `resolveSoftTone` | `bg`/`border` are now translucent (alpha hex) — composite onto the surface before `contrastRatio`; optional 3rd `surface` arg; adds `hoverBg`/`activeBg`. Badge/Alert/Toaster/EmptyState follow | — |
@@ -359,7 +359,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 | `Tag` | Label line-height 1.45 so descenders (`p`, `g`, `y`) are no longer clipped by the ellipsis overflow | — |
 | `Toaster` | `error` toasts announce assertively (`role="alert"`); status icons have a text equivalent | — |
 | `FeedbackForm` | Built on `TextInput`/`InputTextArea`/`RadioButtonGroup`; required fields show `*` in the label | — |
-| `PinInput` | `size` now works (square cells 30 / 38 / 42 / 48, default `sm`) — it was silently ignored | `size="md"` |
+| `PinInput` | `size` now works (square cells 24 / 38 / 40 / 48, default `sm`) — it was silently ignored | `size="md"` |
 | `Tag` | New `leadingIcon` (decorative, before the label) and `isDisabled` (sets `aria-disabled` + native `disabled` on the clickable/remove buttons, so they leave the tab order — not just dimmed) | — |
 | `ToolTip` | Defaults a Popper `preventOverflow` padding of 8px, so a bubble near the right edge no longer overhangs by a subpixel and raises page scrollbars. A caller-supplied `preventOverflow` modifier still wins | pass your own `modifiers` |
 | `Table` / `KanbanBoard` | Column sort buttons and draggable cards now show the library focus ring on keyboard focus (was an opacity flicker / the browser default outline). Kanban card wrappers render as Chakra `Box`; keyboard drag (Space, arrows, Space) is unchanged | — |
@@ -388,6 +388,26 @@ differ — this is a rewrite of the call site, not a rename.
 `RangeSlider`, `Spinner`, `Tab`, `TabList`, `TabPanel`, `TabPanels`, `Tabs`. They now point at the
 library's own themed component rather than the Chakra passthrough.
 
+### `CONTROL_SIZES` (fields) and `BUTTON_SIZES` (buttons) are separate scales — changing one never changes the other
+
+Fields/selects (`TextInput`, `Select`, `MultiSelect`, `SearchSelect`, `NumberInput`, `PinInput`, the
+`DatePicker` family, …) read `CONTROL_SIZES` — xs 24 · sm 38 · md 40 · lg 48. `Button` and every
+button-like trigger (`SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`'s trigger) read the
+separate `BUTTON_SIZES` — xs 24 · sm 32 · md 40 · lg 48. They used to share one token, which is what
+let a field-only size bump leak into buttons — the split is now gate-tested
+(`Common/sizeScaleOwnership.test.ts`).
+
+**Apply:** a PR that "just" bumps a form-field size should never touch `Button.styles.ts`,
+`SegmentedControl`, `Tab`, `TableToggle` or `Dropdown` — if it does, it's reading the wrong token.
+
+### `controlSizeStyles()`'s `minH` silently overrides a smaller `h` override
+
+`fieldStyles.ts`'s `controlSizeStyles()` sets both `h` and `minH` to the same token value. A caller
+overriding only `h` with a smaller literal compiles and renders, but the inherited `minH` still
+wins, so the field stays at the token height.
+
+**Apply:** override both `h` and `minH` together, or don't override either.
+
 ### `Tag`'s `onIconClick` renders nothing without `icon` — the remove button silently never appears
 
 `onIconClick` only turns `icon` into a remove button; it has no effect on its own (`Tag.tsx`
@@ -1411,12 +1431,45 @@ properties first, or doesn't support the pseudo-elements at all, fell back to th
 scrollbar: a plain bar with no relation to the dark sidebar theme, showing up the moment a nav list
 (enough sections/items) overflowed the viewport. Fixed by switching to the already-written
 `cssForScrollBar(theme)` (same file), which sets `scrollbarWidth`/`scrollbarColor` **and** the
-webkit pseudo-elements, themed to `sidebar.background[500]` / `primary[500]`, hidden until hover.
-`FlexCss` is removed — `cssForScrollBar` is now the only scrollbar treatment the SideBar uses.
+webkit pseudo-elements, themed to `sidebar.background[500]` / `sidebar.mutedIcon`/`mutedLabel`,
+hidden until hover. `FlexCss` is removed — `cssForScrollBar` is now the only scrollbar treatment
+the SideBar uses. (2026-09-29: the thumb was briefly brand `primary[500]`/`[700]` — since fixed to
+the neutral tokens shown above; `SecondaryBar`'s own scroll panel got the same styling and a
+duplicate-id fix in the same pass.)
 
 **Apply:** nothing to do. If a nav list is long enough to scroll, the bar now stays invisible until
 hovered, in the sidebar's own colors, on every engine — not just Chromium.
 
+### `SideBar` contrast pass — badge dot, hover fills, missing-icon fallback, default avatar/logo (2026-09-29) — fixed
+
+A themed-UI audit found six real defects, none of them behavior changes: the collapsed-rail
+notification dot (`red[400]`) is now `sidebar.semanticText.error`, which stays legible against the
+rail in both modes instead of drifting; six `whiteAlpha.100` hover/rest fills that sat below the
+sidebar's own perceptible-step floor are now `whiteAlpha.200`, matching every other row's hover;
+the collapsed-flyout submenu (`MenuPopoverContent`) no longer shows Chakra's built-in "?" glyph for
+a sub-item with no `icon` — it draws the same small dot the always-visible inline submenu already
+used; hovering an *active* flyout row no longer gets visibly lighter-then-darker (it now steps
+`.300` -> `.400`, like every other active row); and the default (no `logo`/`avatarUrl`) header logo
+tile and footer avatar initials no longer paint a raw `primary` fill, which was within ~1:1 of the
+rail — invisible — on zinc, skyline and storefront.
+
+**Apply:** nothing to do — same props, same markup, visuals only. If you rendered a `SideBar` or
+`SecondaryBar` with a screenshot baseline captured before 2026-09-29, expect the badge dot color,
+some hover states, and the default logo/avatar tile to look different.
+
+### `SideBar` contrast pass round 2 — muted icon/label under a hover fill, inline-submenu state (2026-09-29) — fixed
+
+A follow-up audit found `sidebar.mutedIcon`/`mutedLabel` could dip under WCAG AA when sitting on
+top of an active or hovered row (the whiteAlpha overlay steps), even though the same token cleared
+AA against the bare rail — the token was never resolved against that combined surface. Also, the
+expanded rail's always-visible inline submenu only swapped an active row's label to white with no
+fill or accent bar, unlike every other active row in the family (top-level rows, the
+collapsed-flyout submenu). Both fixed with no prop or markup changes.
+
+**Apply:** nothing to do — same props, visuals only. Expect a muted icon/label under a hover/active
+row to read slightly lighter than before on some brands, and an active inline-submenu item to now
+show a fill and left accent bar matching the rest of the sidebar's active-row styling.
+
 ### `KanbanBoard`'s `permissions.isViewable: false` hides everything, including header actions
 
 Not just the columns — the select/edit/create header bar disappears too, since the whole component

package/DESIGN-GUIDE.md

@@ -87,12 +87,14 @@ stay light in dark mode.
 `secondary` and `tertiary` render as the same hex on most brands (see `COMPONENT-GOTCHAS.md`) —
 don't lean on that pair to distinguish two categories; reach for a utility scheme instead.
 
-## 5. Controls — one scale, `sm` by default
-
-Every control shares one height scale — `xs` 30px · `sm` 38px · `md` 42px · `lg` 48px — and
-**defaults to `sm`**: `Button`, `TextInput`, `InputTextArea`, `NumberInput`, `Select`, `Search`,
-`RangeSlider`, the `DatePicker` family and `SegmentedControl`. So on a desktop page **don't pass `size`**; controls
-side by side line up. Nothing in a toolbar or table row is taller than the fields beside it.
+## 5. Controls — two scales, `sm` by default
+
+Fields (`TextInput`, `InputTextArea`, `NumberInput`, `Select`, `Search`, `RangeSlider`, the
+`DatePicker` family) sit on `CONTROL_SIZES` — `xs` 24px · `sm` 38px · `md` 40px · `lg` 48px.
+`Button` and every button-like trigger (`SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`)
+sit on the separate `BUTTON_SIZES` scale — `xs` 24px · `sm` 32px · `md` 40px · `lg` 48px. Both
+**default to `sm`**, so on a desktop page **don't pass `size`**. They line up at `md`/`lg`; at
+`sm` a button reads 6px shorter than the field beside it.
 
 | Button role | Props |
 | --- | --- |

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -46,10 +46,9 @@ const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const AppMark_1 = __importStar(require("./AppMark"));
 const AppSwitcherProps_1 = require("./AppSwitcherProps");
 const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
-const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const COLUMNS = 2;
 const HEADING = "Your apps";
-const s = { trigger: controlSizes_1.CONTROL_SIZES.sm.height, mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
 const warned = new Set();
 const warnOnce = (key, message) => {
     if (process.env.NODE_ENV === "production" || warned.has(key))

package/dist/Components/Button/Button.styles.js

@@ -8,7 +8,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/chakra/motion");
 const primitives_1 = require("../../Theme/tokens/primitives");
 const controlSize = (size) => {
-    const { height, fontSize, paddingX } = primitives_1.CONTROL_SIZES[size];
+    const { height, fontSize, paddingX } = primitives_1.BUTTON_SIZES[size];
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.

package/dist/Components/Button/ButtonProps.d.ts

@@ -11,7 +11,7 @@ export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps,
     loadingText?: string;
     /** Defaults to "fit-content", not 100%; the w alias only applies when width is unset — width wins if both are passed. */
     width?: string | number;
-    /** Control height xs 30 · sm 38 · md 42 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
+    /** Control height xs 24 · sm 32 · md 40 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
     size?: "lg" | "md" | "sm" | "xs" | "xl";
     /** Defaults to "solid"; "gradient" paints the theme's fixed brand gradient. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";

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

@@ -5,7 +5,7 @@ import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 export declare const FIELD_RADIUS = "lg";
 export declare const FIELD_BORDER_WIDTH = "1px";
 export declare const FIELD_TRANSITION: string;
-/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+/** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 export declare const controlSizeStyles: (size: ControlSize) => {
     h: string;
     minH: string;

package/dist/Components/Common/fieldStyles.js

@@ -9,7 +9,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.FIELD_RADIUS = "lg";
 exports.FIELD_BORDER_WIDTH = "1px";
 exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "box-shadow", "background-color"]);
-/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+/** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 const controlSizeStyles = (size) => {
     const spec = controlSizes_1.CONTROL_SIZES[size];
     return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -44,7 +44,7 @@ export type BaseDatePickerProps = {
     width?: string | number;
     /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Control-scale height: xs 30 · sm 38 · md 42 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
+    /** Control-scale height: xs 24 · sm 38 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
 /** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */

package/dist/Components/Dropdown/DropDown.js

@@ -17,10 +17,10 @@ const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
 const SIZE_MAP = {
-    xs: { btn: "xs", img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
-    sm: { btn: "sm", img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
-    md: { btn: "md", img: "1.125rem", chevron: controlSizes_1.CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
-    lg: { btn: "lg", img: "1.25rem", chevron: controlSizes_1.CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
+    xs: { btn: "xs", img: "1rem", chevron: controlSizes_1.BUTTON_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
+    sm: { btn: "sm", img: "1rem", chevron: controlSizes_1.BUTTON_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
+    md: { btn: "md", img: "1.125rem", chevron: controlSizes_1.BUTTON_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
+    lg: { btn: "lg", img: "1.25rem", chevron: controlSizes_1.BUTTON_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
     xl: { btn: "lg", img: "1.4rem", chevron: 20, minW: "13rem", gap: 3, rowSize: "lg" },
 };
 const TRIGGER_TRANSITION = (0, motion_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]);

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -28,7 +28,7 @@ export type DropdownProps = {
     LabelStyle?: React.CSSProperties;
     /** Inline style on each row's `image` icon; ignored for options without one. */
     ImageStyle?: React.CSSProperties;
-    /** Trigger + menu size on the shared control scale; defaults to `sm`. `xl` renders an `lg` trigger. */
+    /** Trigger on the button scale, menu rows on the option-row scale; defaults to `sm`. `xl` renders an `lg` trigger. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** @deprecated Use `size` instead. Kept for backward compatibility. */
     optionsSize?: "sm" | "md" | "lg";

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -10,7 +10,7 @@ export type PhoneNumberInputProps = {
     label?: string;
     /** Falls back to an auto-generated id (shared with `inputId` when that's omitted too), so the label is always bound. */
     id?: string;
-    /** Control-scale height: "xs" | "sm" | "md" | "lg" (30 / 38 / 42 / 48px). Defaults to "sm", like TextInput, so it lines up in a form. */
+    /** Control-scale height: xs 24 · sm 38 · md 40 · lg 48px. Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
     value?: string;
     codeValueReturn?: boolean;

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

@@ -18,7 +18,7 @@ export type MultiSelectProps = {
     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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     inputStyle?: object;
     /** Rendered only while `error` is true; a rejected email's internal "Invalid email address" text wins over this until the input changes. */

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

@@ -4,7 +4,7 @@ import type { Tone } from "../../Theme/tokens/builders/tone";
 import type { DaySectionLabels } from "./notificationHelpers";
 /** Shared tone vocabulary for the badge, row tile and zone/filter buttons — an alias of the theme's Tone. */
 export type NotificationTone = Tone;
-/** Shared control scale for the bell trigger. */
+/** Button size scale for the bell trigger. */
 export type NotificationBellSize = "xs" | "sm" | "md" | "lg";
 /** Bell trigger with the three-state badge (capped count -> dot -> nothing); renders no panel itself. */
 export interface NotificationBellProps {

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -11,11 +11,10 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
-const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const sizeMap = {
-    sm: { h: controlSizes_1.CONTROL_SIZES.sm.height, avatar: "26px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: controlSizes_1.CONTROL_SIZES.md.height, avatar: "30px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: controlSizes_1.CONTROL_SIZES.lg.height, avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -2,7 +2,7 @@ import { PinInputProps } from "@chakra-ui/react";
 /** The only pin/OTP component exported from the package. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
-    /** Square cell size, aligned to CONTROL_SIZES heights (xs 30 · sm 38 · md 42 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 24 · sm 38 · md 40 · lg 48). Defaults to "sm". */
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "flushed" | "outline" | "filled" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";

package/dist/Components/RangeSlider/RangeSliderProps.d.ts

@@ -23,7 +23,7 @@ interface RangeSliderSharedProps {
     scale?: SliderScale;
     /** Formats a raw value for display — value labels, tooltip and aria-valuetext. Defaults to String. */
     formatValue?: (value: number) => string;
-    /** Track thickness and thumb size, from the shared control scale. Defaults to "sm". */
+    /** Track thickness and thumb size, keyed by ControlSize name — its own values, not the field or button scale. Defaults to "sm". */
     size?: ControlSize;
     /** Heading shown above the track. Pass "" to render none. Defaults to "Range". */
     label?: string;

package/dist/Components/RangeSlider/rangeSliderSize.d.ts

@@ -3,5 +3,5 @@ export type RangeSliderSizeSpec = {
     trackHeight: string;
     thumbSize: string;
 };
-/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+/** Track thickness and thumb diameter for a size — its own values, keyed by the same size names. */
 export declare const rangeSliderSize: (size: ControlSize) => RangeSliderSizeSpec;

package/dist/Components/RangeSlider/rangeSliderSize.js

@@ -7,6 +7,6 @@ const RANGE_SLIDER_SIZES = {
     md: { trackHeight: "4px", thumbSize: "1.25rem" },
     lg: { trackHeight: "5px", thumbSize: "1.5rem" },
 };
-/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+/** Track thickness and thumb diameter for a size — its own values, keyed by the same size names. */
 const rangeSliderSize = (size) => RANGE_SLIDER_SIZES[size];
 exports.rangeSliderSize = rangeSliderSize;

package/dist/Components/Search/SearchProps.d.ts

@@ -15,7 +15,7 @@ export type SearchProps = {
     onClear?: () => void;
     /** @deprecated Use `onClear` — same behaviour, consistent casing. */
     onclose?: () => void;
-    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     name?: string;
     /** Disables the input and hides the clear button; the hotkey still focuses it. */

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -38,7 +38,7 @@ export type SearchSelectProps = {
     width?: string | number;
     /** Only sets the insideSelect segment's height, not the main field's — that's driven by `size`. */
     height?: string | number;
-    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     /** Blocks opening, typing, chip removal and clearing; renders the shared disabled field look. */
     isDisabled?: boolean;

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -27,7 +27,7 @@ const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
 function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", surface, "aria-label": ariaLabel, }) {
     const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
-    const control = controlSizes_1.CONTROL_SIZES[size];
+    const control = controlSizes_1.BUTTON_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;

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

@@ -1,5 +1,5 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
-/** Whole-track height on the shared control scale (sm 38 · md 42 · lg 48px); defaults to "sm". */
+/** Whole-track height on the button control scale (sm 32 · md 40 · lg 48px); defaults to "sm". */
 export type SegmentedControlSize = Exclude<ControlSize, "xs">;
 /** brandSlide = primary view switcher; underlineSlide = dense toolbar; default = plain buttons. */
 export type SegmentedControlVariant = "default" | "brandSlide" | "underlineSlide";

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

@@ -24,7 +24,7 @@ type SelectCommonProps = {
     label?: string;
     /** Native: the built-in placeholder `<option>`. Popup: trigger text when nothing is selected. Defaults to "Select Option". */
     placeholder?: string;
-    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Applied to the wrapping FormControl. */
     width?: string | number;

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -49,7 +49,7 @@ export type SelectSearchProps = {
     errorMessage?: string | undefined;
     /** Hint under the field; replaced by `errorMessage` while `error` is true. */
     helperText?: string;
-    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Shows a sticky "Add New"-style footer row in the popup; required for all Bottom* props. */
     isBottomIcon?: boolean | undefined;

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -33,7 +33,7 @@ type SelectV2CommonProps = {
     isReadOnly?: boolean;
     /** Label asterisk + `aria-required` only; never blocks an empty submit. */
     isRequired?: boolean;
-    /** Shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Shows a type-ahead filter input at the top of the popup. Defaults to true. */
     isSearchable?: boolean;

package/dist/Components/SideBar/SecondaryBar.js

@@ -14,6 +14,7 @@ const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const Sidebar_1 = require("../../Constants/Sidebar");
+const sidebarId_1 = require("./sidebarId");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const sidebarAccent_1 = require("../../Theme/tokens/builders/sidebarAccent");
 const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
@@ -47,7 +48,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!(0, menuDisabled_1.menuDisabled)(item))
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -65,9 +66,10 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/Components/SideBar/SideBar.js

@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const sidebarId_1 = require("./sidebarId");
 const Sidebar_1 = require("../../Constants/Sidebar");
@@ -36,13 +35,18 @@ const sidebarScale_1 = require("./sidebarScale");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const primaryFillRung = (0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white);
-    const primaryFill = theme.colors.primary[primaryFillRung];
-    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: primaryFill, color: (0, filledSurface_1.labelOnFill)(primaryFill, theme.colors.white, theme.colors.black), borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box
+    // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+    // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+    , { 
+        // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+        // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
                     "&::after": {
                         content: '""',
                         position: "absolute",
@@ -61,7 +65,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -76,8 +80,10 @@ const deriveInitials = (user) => {
 const UserFooter = ({ user, toggle, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", 
+        // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {