@kennycorrea/ui 0.11.1 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.11.2 — 2026-10-19
+
+- **`ChipGroup`** — centring the selected chip no longer calls `scrollIntoView`, whose `block: 'nearest'` scrolled the whole page to a strip below the fold (about 1000 px on a long page). The strip's own scroller is moved with `scrollTo({ left })`, and nothing else; `prefers-reduced-motion` gets an instant scroll.
+- **`SegmentedControl`** — unselected labels are `--gray-12` instead of `--gray-11`: 4.23:1 on the track in light mode was under WCAG AA. The thumb still tells selected from unselected.
+
 ## 0.11.1 — 2026-10-19
 
 - **`ScrollStrip`** (axe `scrollable-region-focusable`) — now `role="region"` with an accessible name (`aria-label`, default `UiStrings.scrollableRegion` "Scrollable content"). It is a tab stop (`tabIndex=0`) only while its content overflows (ResizeObserver), with a `:focus-visible` ring; ArrowLeft/Right scroll about one item, Home/End jump. Layout, snap and `-mx-4` usage unchanged.

package/dist/atoms/ChipGroup/ChipGroup.js

@@ -22,8 +22,16 @@ export function ChipGroup(props) {
     };
     // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the selection changes
     useEffect(() => {
-        const chip = scroller.current?.querySelector('[data-selected="true"]');
-        chip?.scrollIntoView?.({ inline: 'center', block: 'nearest', behavior: 'smooth' });
+        const el = scroller.current;
+        const chip = el?.querySelector('[data-selected="true"]');
+        // Scroll the strip itself, never the window or another ancestor (scrollIntoView does both).
+        if (el && chip) {
+            const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+            el.scrollTo?.({
+                left: chip.offsetLeft - (el.clientWidth - chip.offsetWidth) / 2,
+                behavior: reduce ? 'auto' : 'smooth',
+            });
+        }
         measure();
     }, [key]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: measure only touches refs and a bailing setState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",

package/tokens.css

@@ -836,7 +836,7 @@
   box-shadow: 0 1px 3px var(--black-a4), 0 0 0 0.5px var(--black-a3);
   transform: translateX(calc(var(--seg-index) * 100%)); transition: transform 220ms cubic-bezier(0.3, 0.7, 0.2, 1); }
 .ui-segmented__item { position: relative; z-index: 1; min-width: 24px; border: 0; background: none; font: inherit; font-weight: 500;
-  color: var(--gray-11); border-radius: 999px; cursor: pointer; white-space: nowrap;
+  color: var(--gray-12); border-radius: 999px; cursor: pointer; white-space: nowrap;
   -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color 150ms; }
 .ui-segmented__label { display: block; overflow: hidden; text-overflow: ellipsis; }
 .ui-segmented[data-size="md"] .ui-segmented__item { min-height: 32px; padding: 0 16px; font-size: 14px; }