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

package/CHANGELOG.md

@@ -0,0 +1,195 @@
+# Changelog
+
+All notable changes to `pixelize-design-library`.
+
+Versions follow semver. The `beta` dist-tag is released manually from the active feature branch;
+`latest` is published by CI from `develop`. **Pin a prerelease exactly** (`2.4.2-beta.43`, never
+`^2.4.2-beta.43`) — a caret range on a prerelease is satisfied by the next stable publish, which
+silently downgrades you.
+
+## [Unreleased] — 2.4.2-beta.x
+
+The theme-tokens/dark-mode line. Still in beta; the breaking items below land together in the
+next major.
+
+### Added
+
+- **`SegmentedControl` / `Switch` — `surface`.** The background the control is drawn on. Unselected,
+  selected and hover inks are re-aimed at it; without it they are measured against the page canvas,
+  so a control on a brand-filled bar renders its inactive label at 1.0–2.0:1. Defaults to the page
+  canvas, so existing call sites are unchanged.
+- **`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.
+- **`MediaViewer`** — a full-screen viewer for images, video, audio, PDF, Office documents, text
+  and archives, with a filmstrip, keyboard navigation and per-kind fallbacks. `index` is optional:
+  omit it and the viewer owns navigation itself.
+- **`NotificationBell` / `NotificationPanel` / `NotificationList` / `NotificationItem`** — a
+  notification tray with zones, filters, day bucketing and all four load states.
+- **`Backdrop`** — a fading scrim matching MUI's Backdrop exactly (black at 0.5, no blur, 225ms in /
+  195ms out, 40px spinner), with `container` scoping, `invisible`, `onClick` dismissal and
+  `allowBackgroundInteraction` to let clicks reach the page behind. Prefer it over any hand-rolled
+  overlay. `Loading` gains `variant="dim"` to route through it; its default stays `"frosted"`, so
+  existing screens are visually unchanged.
+- **`ConfirmDialog`** — the shared Cancel/Confirm shape, including typed confirmation
+  (`confirmationText`).
+- **`Avatar` / `AvatarGroup`** as owned components. The fill is derived from `name` through the
+  theme's colour scales, so it follows brand and dark mode on its own.
+- **`RangeSlider`** as an owned dual/single-thumb component with a `marks` prop.
+- `resolveFilledSurface(scale, colors)` — picks readable ink for any filled surface.
+- `size="2xs"` (16px) on `Avatar`, and `getInitials` to override the built-in derivation.
+
+### 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.
+- `src/index.publicApi.test.ts` is now **bidirectional** — removing a public export fails the
+  build instead of passing unnoticed (249 → 387 guarded names).
+- `Accordian` still resolves, now as a `@deprecated` alias for the owned `Accordion`.
+- **`ToggleSwitch` absorbs every `InputSwitch` capability**, so `InputSwitch`'s deprecation is now
+  true: `isChecked` is optional (uncontrolled via `defaultChecked`), `fieldLabel` (+ `isInformation`/
+  `informationMessage`) for a label above the track distinct from the inline `label` beside it,
+  `colorScheme` (any brand/global scale, via `resolveFilledSurface`), `isReadOnly` with real
+  `aria-readonly`, and `m`/`mt`/`mb`/`ml`/`mr`/`mx`/`my` on the wrapper. `InputSwitch` is now a
+  genuine thin wrapper — no prop it previously accepted is silently dropped.
+
+### Fixed
+
+- **`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
+  presses advanced one item. Relative moves now compose.
+- `SideBar` menu labels clipped descenders (g/y/p/q/j), and its nav list showed a bare, unthemed
+  scrollbar when items overflowed.
+- `SideBar`'s `locked` menu-item flag now actually blocks interaction.
+- `sidebar.hoverBg` no longer shares `sidebar.divider`'s value.
+- `InputSwitch`'s `colorScheme` was destructured and discarded — every switch rendered `primary`
+  regardless of the prop. Now forwarded to `ToggleSwitch` and actually applied.
+
+### Deprecated
+
+Nothing is removed yet — each of these still ships its full implementation.
+
+- `SelectV2` — use `Select` with `native={false}`; it is already a thin wrapper over it.
+- `SearchSelect`, `SelectSearch` are **no longer `@deprecated`.** Both now say "prefer `Select`
+  for new work" instead: `@deprecated` claimed a migration that loses real capabilities
+  (`insideSelect`, `isSelectAll`, `addNew`, field-level loading; and `SelectSearch`'s combobox is
+  the text input itself, a different ARIA pattern). The marker returns once `Select` absorbs them.
+- `Dropdown` is **no longer deprecated.** The marker was an artifact of the Select-consolidation
+  pass; `Dropdown` is a `role="menu"` action menu, never a value picker, and nothing replaces it.
+- `Notification` is **no longer deprecated.** `NotificationItem` cannot replace it —
+  `formatRelativeTime` clamps every future date to "Just now", so a countdown card silently
+  renders wrong text through it.
+- Dead props now marked rather than silently ignored: `Checkbox.variant`, `ProgressBar.variant`,
+  `Table.isVisiblity` and its export props, `SideBar.selectedSubMenu`, `InputSwitch.variant`/
+  `.spacing`/`.isFocusable`, and nine native-only `Select` props that are inert under
+  `native={false}` (these now warn in dev).
+- `disabled` → `isDisabled` on `SideBar`, `Buttons`, `StageProgress`, `Input`, `DatePicker`. Both
+  are accepted; `isDisabled` wins.
+- `MultiSelctOPtions` → `MultiSelectOption` (two typos in a shipped public type name).
+
+### Breaking — staged for the next major, not yet released
+
+**34 Chakra value passthroughs (and 12 type passthroughs) are removed from the Primitives barrel**,
+because each duplicated a component this library already owns. The point of the library is one
+place to change the UI; a Chakra twin beside an owned component means half the call sites bypass
+the theme.
+
+Every removal is a **compile error, never a silent behaviour change** — the owned components' props
+differ, so `tsc` names each site and nothing must be found by hand.
+
+- `Tabs` takes `value: string` where Chakra's took `index: number`.
+- `RangeSlider`'s old sub-parts (`SliderTrack`, `SliderFilledTrack`, `SliderThumb`, `SliderMark`)
+  are gone; the owned component renders its own internals.
+- `Avatar`/`AvatarGroup` keep their names but narrow their props: `name` is required, Chakra style
+  props are rejected, and `AvatarGroup` takes a `people` array instead of `Avatar` children.
+
+**Blast radius concentrates in `hrms`, with a long tail in `social-frontend`, `tickets`,
+`account-frontend`, `spare-cart` and `lfour`.** `crm-frontend` and `commerce/frontend` import no
+affected name at all.
+
+Get the current number from `scripts/verify-consumers.sh check`, which typechecks every consumer
+against a real build — **do not estimate it by grep.** A grep conflates names that were removed
+outright (`ChakraModal*`, `CardBody`, `ModalContent`, the `Slider*` sub-parts, `TabList`/`TabPanel`)
+with names that still resolve but narrowed (`Avatar`, `AvatarGroup`, `Tabs`, `RangeSlider`), and
+overcounts badly — that mistake has already been made twice in this repo's own planning docs.
+
+Layout and composition primitives with no owned equivalent stay exported: `Box`, `Flex`, `Stack`,
+`Grid`, `Text`, `Heading`, `Divider`, `Badge`, `Alert*`, `Menu*`, `Popover*`, `FormControl*`,
+`List*`, `Portal`, `TableRoot` and the Chakra hooks.
+
+Consumers pin published versions, so none of this bites until a repo upgrades.
+
+### Known gaps
+
+Tracked in `.cursor/plans/deferred-breaking-changes.md` (repo-only). The ones a consumer can hit:
+
+- `Select`'s search matches `label` only — no `searchFields` / `filterOption`.
+- `Select`'s `virtualizeAfter` silently disables itself when any option has a `group`.
+- `Select`'s `onLoadMore` is zero-arg with no `hasMore` gate, unlike `SearchSelect.pagination`.
+- Migrating `SearchSelect` → `Select` by hand: `SearchSelect.onSearch` debounces **1000 ms**;
+  `Select.searchDebounceMs` defaults to **0**. A mechanical rename starts firing the consumer's
+  API on every keystroke.
+- React 19 is not supported — `peerDependencies` pins React `^18.3.1`, in step with Chakra 2.8.