@cloudflare/kumo 2.2.2 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # @cloudflare/kumo
 
+## 2.4.0
+
+### Minor Changes
+
+- b93d881: Update Banner to use borderless tinted styling by default and add a secondary variant.
+- a9a1526: Re-export `useFilter` from `Combobox` and `Autocomplete` namespaces. Use it to write custom `filter` props that preserve Base UI's default case- and accent-insensitive matching via `Intl.Collator`.
+- 3db8294: Sidebar: comprehensive modernization
+
+  **Breaking changes:**
+  - Removed `Sidebar.Input` — build custom search triggers inline
+  - Removed `Sidebar.MenuAction` — unused in practice
+  - Removed `Sidebar.GroupContent` and group-level collapsible props (`collapsible`, `defaultOpen`, `open`, `onOpenChange`) from `Sidebar.Group` — use `Sidebar.Collapsible` at the item level instead
+  - Replaced Base UI Collapsible dependency with custom CSS grid-rows implementation
+  - `SidebarState` type is now `"expanded" | "collapsed" | "peeking"` (was `"expanded" | "collapsed"`)
+
+  **New features:**
+  - `contained` prop on Provider — absolute positioning for embedded/demo sidebars
+  - `peekable` prop on Provider — hover/focus collapsed sidebar to temporarily expand
+  - `animationDuration` prop on Provider — configurable animation timing
+  - `Sidebar.SlidingViews` + `Sidebar.SlidingView` — animated horizontal transitions between navigation surfaces
+  - Animated `SidebarPanelIcon` replacing Phosphor `SidebarSimpleIcon`
+  - Enhanced `Sidebar.Trigger` with `aria-expanded` and dynamic `aria-label`
+  - Keyboard-accessible resize handle (arrow keys, Home, End)
+  - Custom `Sidebar.Collapsible` with keyboard auto-expand on focus
+
+  **Token/styling fixes:**
+  - `border-kumo-hairline` → `border-kumo-line` throughout
+  - Hardcoded `duration-250` → `--sidebar-animation-duration` CSS custom property
+  - `bg-kumo-base` → `bg-(--sidebar-bg)` for theme overridability
+  - Focus styles: `ring-2/ring-kumo-brand` → `outline-none/text-kumo-strong/bg-kumo-tint`
+  - Icon opacity-50, updated spacing (header h-58px, footer h-12, menu gap-y-px)
+  - `isolate` on sidebar root with low z-index (z-1, z-2) instead of z-20/z-50
+  - Mobile sidebar now has correct `data-state`/`data-side`/`data-variant`/`data-collapsible` attributes
+
+- 18f5e42: **TimeseriesChart: React tooltip with Base UI positioning**
+
+  Replaces ECharts' HTML-string tooltip with a React component positioned by Base UI's Tooltip primitive:
+  - Tooltip rendered as a React component with correct theme tokens — no more inline styles or `getComputedStyle` hacks
+  - Positioning handled by Base UI Tooltip (Floating UI), with automatic collision avoidance and viewport flipping
+  - New `tooltipFollowCursor` prop: `"both"` (default, free-following) or `"x"` (axis-locked, Recharts-style)
+  - New `tooltipMode` prop: `"all"` (default) or `"single"` (nearest series to cursor)
+  - New `tooltipMaxItems` prop: caps rows in `"all"` mode with `+N more` footer (default `10`)
+  - Date formatted with `Intl.DateTimeFormat` (locale-aware) instead of ISO string
+  - Values sorted descending; fallback formatter avoids scientific notation
+
+### Patch Changes
+
+- ab273fe: Banner: replace `dark:` Tailwind variants with new `kumo-banner-info` and `kumo-banner-warning` semantic tokens so dark-mode opacity is baked into the design system. No visual change.
+- 351fac9: fix(styles): show pointer cursor on clickable Kumo elements by default
+
+  Adds a global `cursor: pointer` rule scoped to elements rendered by Kumo
+  components, identified by the new `data-kumo-component` and `data-kumo-part`
+  attributes. Interactive component roots and parts now opt into the rule by
+  setting these attributes, which gives the library a stable scoping primitive
+  that doesn't couple to Tailwind class names.
+
+  Components updated to set `data-kumo-component` / `data-kumo-part`:
+  Button, LinkButton, Link, Checkbox, Radio, Switch, Select (trigger, option),
+  DropdownMenu (item, link-item, checkbox-item, radio-item, submenu-trigger),
+  Combobox (trigger, item, clear, chip-remove), Autocomplete (item),
+  Dialog (trigger, close), Popover (trigger), Tabs (tab),
+  Collapsible (trigger, default-trigger), Breadcrumbs (link),
+  TableOfContents (item, group-link), Sidebar (menu-button, menu-sub-button,
+  trigger, rail), MenuBar (option), Toast (close), SensitiveInput
+  (toggle-visibility, copy, masked-container).
+
+- 3db8294: fix(sidebar): collapsed state styling, transitions, and sliding views
+- 6d5d9f0: Add `flex items-center` to `ComboboxBase.Icon` in `TriggerInput` for consistency with `TriggerValue` and `Select`
+- 5081d35: Fix `Select` placeholder not showing when `renderValue` is provided and the value is empty.
+- 9d4a2ff: Update semantic color tokens to better represent status icons and indicators:
+  - Adjust status token values in the theme generator and refresh generated theme output
+  - Update toast and badge status background treatments
+  - Update docs to reflect new tint token usage
+- 1585bfe: Adjust toast visual styling for improved readability and emphasis: increase background tint intensity for success/warning/info variants, refine description text contrast, and update close-button icon contrast.
+- 6e9b524: Fixed vertical alignment of checkbox and radio indicators with multi-line labels.
+
+  When label text wrapped to multiple lines, the indicators were vertically centered against the entire text block. They now align to the top, sitting next to the first line of text.
+
+- 729caa3: echarts is now an optional peer dependency. If you don't use Chart components (Chart, TimeseriesChart, SankeyChart), it will no longer be installed automatically. If you do use them, run npm install echarts (as documented).
+
+## 2.3.0
+
+### Minor Changes
+
+- b68caba: Added `Badge` dot styling as a new variant for indicators that need a subtle visual cue.
+  Updated badge docs and demo examples to reflect the new badge variant and dot-style behavior.
+
+### Patch Changes
+
+- a210c9c: Update Base UI to 1.5.0.
+- 64a4bda: Fix InputGroup focus ring thickness and color: container mode uses 1.5px ring (wraps entire group including buttons), hybrid container zone and individual mode use 1px ring (thin to avoid colliding with adjacent buttons), and all modes use `ring-kumo-focus/50` (50% opacity) to match the standalone Input component.
+- 0003bf5: Fix error state red border on Combobox, Select, Autocomplete, and SensitiveInput to match Input behavior
+- 4f2b47c: Add inline label layout and fix auto-assigned node colors in tooltips
+- 0e79214: Fix Tooltip popup overflowing viewport when content is wider than available space. The popup now constrains its width to `var(--available-width)`, a CSS variable provided by Base UI's Positioner that reflects the space between the trigger and the viewport edge.
+
 ## 2.2.2
 
 ### Patch Changes