pixelize-design-library 2.4.2-beta.50 → 2.4.2-beta.52

package/CHANGELOG.md

@@ -7,6 +7,10 @@ Versions follow semver. The `beta` dist-tag is released manually from the active
 `^2.4.2-beta.43`) — a caret range on a prerelease is satisfied by the next stable publish, which
 silently downgrades you.
 
+Found a bug or a gap? Report it as a GitHub issue and track it to closure — see
+[COMPONENT-GOTCHAS.md](COMPONENT-GOTCHAS.md#found-a-gap-or-a-bug-report-it-then-track-it). A fix's
+line below names its issue number.
+
 ## [Unreleased] — 2.4.2-beta.x
 
 The theme-tokens/dark-mode line. Still in beta; the breaking items below land together in the
@@ -43,12 +47,18 @@ next major.
 
 ### Changed
 
-- **Control heights: `xs` 24px → 28px, `sm` 32px → 35px.** `md` (40px) and `lg` (48px) are
+- **Control heights: `xs` 24px → 30px, `sm` 32px → 38px, `md` 40px → 42px.** `lg` (48px) is
   unchanged. `CONTROL_SIZES` is the one scale behind every field, select and button, so `Button`,
   `TextInput`, `InputTextArea`, `NumberInput`, `PinInput`, `Select`, `SelectV2`, `SearchSelect`,
-  `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl` and the `DatePicker` family all grow
-  together and still line up side by side. `sm` is the default size, so most call sites gain 3px of
-  height without passing anything.
+  `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`, `Tabs`, `TableToggle` and the
+  `DatePicker` family all grow together and still line up side by side. `sm` is the default size,
+  so most call sites gain 6px of height without passing anything.
+- **Option rows follow the scale: 24/30/34/40px → 26/32/36/40px** in `Select`, `SelectV2`,
+  `SearchSelect`, `SelectSearch`, `Dropdown`, table filter selects and Chakra `MenuItem` — always
+  6px inside the trigger that opens them (4px at `lg`).
+- **`OrgSwitcher` and `AppSwitcher` sit on the control scale.** `OrgSwitcher` sm/md/lg were
+  32/40/48px and are now 38/42/48px; the `AppSwitcher` trigger was 36px and is now 38px, so both
+  line up with an `sm` button beside them.
 
 - **`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

package/COMPONENT-GOTCHAS.md

@@ -11,6 +11,52 @@ so it's available without checking out the library's source repo. Its companion
 
 ---
 
+## Found a gap or a bug? Report it, then track it
+
+The library exists so a UI change is made **once, here** — not patched per app. So when a component
+is wrong, missing a prop, or can't express what a screen needs, **don't work around it in your app
+and move on.** Report it upstream; a workaround nobody knows about is a bug that gets rediscovered
+in every other app.
+
+**What counts:** a component that renders wrong (misaligned, clipped, wrong size or colour, off the
+control scale), a prop you need that doesn't exist, a silent-failure trap that isn't listed below, or
+a doc that contradicts what you measured.
+
+**How to report** — one GitHub issue on `pixelize-tech/Micro-Components`, with the label `bug` or
+`enhancement`. From a terminal (AI agents included) this is one command:
+
+```bash
+gh issue create --repo pixelize-tech/Micro-Components --label bug \
+  --title "[consumer] <Component>: <what is wrong>" \
+  --body "Version: <output of: npm ls pixelize-design-library>
+App / screen: <where you saw it>
+Expected: <what should happen>
+Actual: <what happens, with measured numbers if it is visual>
+Repro: <props / minimal snippet>
+Workaround in the app: <none, or what you did and where, so it can be removed>"
+```
+
+Measure, don't eyeball: for a visual bug give the rendered size and offset (`getBoundingClientRect`)
+and the `size` prop — "icon 1.5px above centre at `sm`" gets fixed; "looks off" doesn't.
+
+**How it is tracked** — the issue is the record; there is no second list.
+
+| State | What it means | What you do |
+| --- | --- | --- |
+| Open | Reported, not yet fixed | Keep any workaround, and comment its file path on the issue |
+| Closed with a version | Fixed in the named beta/release, and the fix is under `### Fixed` in [CHANGELOG.md](CHANGELOG.md) citing the issue | Bump the pin to that version (exact, never a caret on a prerelease), **delete the workaround**, close your own follow-up |
+| Closed as `wontfix` / `invalid` / `duplicate` | Not changing, or already covered | Read the reason; the workaround stays, or use the issue it points to |
+
+Before reporting, search first — `gh issue list --repo pixelize-tech/Micro-Components --search "<component>" --state all`
+— and check the [CHANGELOG.md](CHANGELOG.md) shipped with your installed version; the gap may already
+be fixed in a newer beta.
+
+**Maintainers:** a fix closes its issue in the same change that lands it, and its CHANGELOG line
+names the issue number and the version that ships it. A workaround someone left in an app is only
+removable if the issue says which version fixes it, so never close without naming one.
+
+---
+
 ## 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
@@ -266,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` (35px). One scale for all: xs 28 / sm 35 / md 40 / lg 48 — `md` is now 40px everywhere (`TextInput` was 44, selects 38, `SegmentedControl` ~36). `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 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"` |
 | `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 | — |
@@ -312,7 +358,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 28/35/40/48, default `sm`) — it was silently ignored | `size="md"` |
+| `PinInput` | `size` now works (square cells 30 / 38 / 42 / 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 | — |

package/DESIGN-GUIDE.md

@@ -89,7 +89,7 @@ don't lean on that pair to distinguish two categories; reach for a utility schem
 
 ## 5. Controls — one scale, `sm` by default
 
-Every control shares one height scale — `xs` 28px · `sm` 35px · `md` 40px · `lg` 48px — and
+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.
@@ -192,6 +192,10 @@ hides its primary; when only one section is empty on a populated page, that sect
 - Centered page titles, hero-sized headings, `size="lg"` buttons, or `size` props restating the default.
 - More than one solid button in a view; a destructive action without `AlertDialog`.
 - A page with only the data state.
+- **Work around a library gap silently.** If a component is wrong or can't do what the screen
+  needs, report it (see "Found a gap or a bug?" in [COMPONENT-GOTCHAS.md](COMPONENT-GOTCHAS.md)) so
+  it is fixed once, here, and remove your workaround when the issue closes.
+
 
 ## 9. Reference pages
 

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -46,9 +46,10 @@ 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: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: controlSizes_1.CONTROL_SIZES.sm.height, 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/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 28 · sm 35 · md 40 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
+    /** Control height xs 30 · sm 38 · md 42 · 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/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 28 · sm 35 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
+    /** Control-scale height: xs 30 · sm 38 · md 42 · 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/Input/TextInputProps.d.ts

@@ -1,6 +1,6 @@
 import { InputProps, SystemProps } from "@chakra-ui/react";
 import type { CSSProperties, ReactNode } from "react";
-/** The library's primary single-line text field (default size `sm`, 35px; no default placeholder). `type="password"` auto-renders a show/hide toggle unless `inputRightIcon` is set or `isPasswordToggleDisabled` is true. Inside a consumer's own `FormControl`, it detects the ancestor and skips rendering its own, inheriting id/invalid/required/disabled from it. */
+/** The library's primary single-line text field (default size `sm`, 38px; no default placeholder). `type="password"` auto-renders a show/hide toggle unless `inputRightIcon` is set or `isPasswordToggleDisabled` is true. Inside a consumer's own `FormControl`, it detects the ancestor and skips rendering its own, inheriting id/invalid/required/disabled from it. */
 export type TextInputProps = Omit<InputProps, "id" | "name" | "minW" | "maxW" | "autoComplete" | "ref" | "isInvalid"> & {
     label?: string;
     /** Optional — an id is generated when omitted, so the label is always bound. `isRequired` sets `aria-required`, not native `required`. */

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 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · 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/OrgSwitcher/OrgSwitcher.js

@@ -11,10 +11,11 @@ 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: "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 },
+    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 },
 };
 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 28 · sm 35 · md 40 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 30 · sm 38 · md 42 · 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/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 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · 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 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · 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/SegmentedControlProps.d.ts

@@ -1,5 +1,5 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
-/** Whole-track height on the shared control scale (sm 35 · md 40 · lg 48px); defaults to "sm". */
+/** Whole-track height on the shared control scale (sm 38 · md 42 · 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 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · 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 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · 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 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Shared control scale (xs 30 · sm 38 · md 42 · 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/Theme/tokens/primitives/controlSizes.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = void 0;
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
-    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    xs: { height: "1.875rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.625rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };
 exports.CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];

package/dist/Theme/tokens/primitives/optionRowSizes.js

@@ -4,19 +4,19 @@ exports.optionRowSpec = exports.OPTION_ROW_RADIUS = exports.OPTION_ROW_SIZES = v
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 exports.OPTION_ROW_SIZES = {
     xs: {
-        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        minH: "1.625rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
         fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
-        avatarSize: "2xs", virtualRowHeightPx: 24,
+        avatarSize: "2xs", virtualRowHeightPx: 26,
     },
     sm: {
-        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
-        avatarSize: "xs", virtualRowHeightPx: 30,
+        avatarSize: "xs", virtualRowHeightPx: 32,
     },
     md: {
-        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2.25rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
-        avatarSize: "xs", virtualRowHeightPx: 34,
+        avatarSize: "xs", virtualRowHeightPx: 36,
     },
     lg: {
         minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -11,9 +11,10 @@ import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 const COLUMNS = 2;
 const HEADING = "Your apps";
-const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: CONTROL_SIZES.sm.height, 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/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -9,10 +9,11 @@ import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 const sizeMap = {
-    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 },
+    sm: { h: CONTROL_SIZES.sm.height, avatar: "26px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: CONTROL_SIZES.md.height, avatar: "30px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: CONTROL_SIZES.lg.height, avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = useCustomTheme();

package/dist/esm/Theme/tokens/primitives/controlSizes.js

@@ -1,8 +1,8 @@
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 export const CONTROL_SIZES = {
-    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
-    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    xs: { height: "1.875rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.625rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };
 export const CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];

package/dist/esm/Theme/tokens/primitives/optionRowSizes.js

@@ -1,19 +1,19 @@
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 export const OPTION_ROW_SIZES = {
     xs: {
-        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        minH: "1.625rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
         fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
-        avatarSize: "2xs", virtualRowHeightPx: 24,
+        avatarSize: "2xs", virtualRowHeightPx: 26,
     },
     sm: {
-        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
-        avatarSize: "xs", virtualRowHeightPx: 30,
+        avatarSize: "xs", virtualRowHeightPx: 32,
     },
     md: {
-        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2.25rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
-        avatarSize: "xs", virtualRowHeightPx: 34,
+        avatarSize: "xs", virtualRowHeightPx: 36,
     },
     lg: {
         minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",

package/package.json

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