@kennycorrea/ui 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -1,16 +1,122 @@
 # Changelog
 
-## 0.9.1 — 2026-10-18
+## 0.11.0 — 2026-10-19
+
+- **Touch feedback** — Button, list rows, `StatTile` and `TabBar` items share a pressed state (`:active` scale `--press-scale` 0.97 + tint, `--press-duration` 120 ms); hover styles are in `@media (hover: hover)`. TabBar no longer dims on press.
+- **`Button size="touch"`** (44px) and **`iconOnly`**, which grows the hit area to 44px on coarse pointers via `::before` without changing the visual size.
+- **`Toaster`** — `position` adds `top-center` / `bottom-center` (vertical swipe-to-dismiss); `offset` takes any CSS length (e.g. `var(--tabbar-height)`).
+- **Fields** — `Input`, `Textarea` and the `Select` trigger are 16px on coarse pointers (no iOS focus zoom); `inputMode` / `enterKeyHint` passthrough documented.
+
+- **`PullToRefresh`** — wraps the page (`scroller="document"`, default) or its own scroll container (`"self"`). A touch drag from scroll-top past `threshold` shows a spinner and calls `onRefresh(): Promise<void>`, holding until it settles. Active only with `(pointer: coarse)` and only when the scroller is at the top; no effect on desktop. No transitions under `prefers-reduced-motion`. Label from `UiStrings.refreshing` (default "Refreshing"). A shortcut only: the parent must still offer a visible refresh action.
+
+- **`StatTile`** — a compact KPI tile on `Card` (`variant`, `density`): `label`, `value` (tabular numerals), optional `delta` `{ value, direction, tone, label }` with an arrow and a positive/negative/neutral tone independent of direction, a `sparkline` slot, and `href` / `onClick` that make the whole tile a link or button with a chevron.
+- **`ScrollStrip`** — a horizontal scroll-snap row (`snap-x mandatory`, scroll padding equal to `--page-gutter`, hidden scrollbar, items peek at the edge via `itemWidth`) that becomes a `columns`-wide CSS grid from `gridFrom` (default `md`). For KPI rows and card carousels.
+- New token: `--page-gutter` (optional; falls back to 16px).
+
+- **`SegmentedControl`** — one choice from 2–5 `options` `{ value, label, disabled? }` on a pill track with a sliding thumb (CSS transform, off under `prefers-reduced-motion`). Equal-width segments, `fullWidth`, `size` `sm` | `md`. Radio semantics with a roving tabindex: arrow keys move and select (wrapping, skipping disabled), Home/End jump. Hand-built; no new dependency.
+- **`ChipGroup`** — horizontally scrolling filter chips, single (`value: string | null`, click the selected chip to clear) or `multiple` (`value: string[]`). Scroll-snap, fade edges that show only where there is more to scroll, and the selected chip scrolled into view. Chips are `aria-pressed` buttons; Left/Right/Home/End move focus.
+- **Breaking:** `SegmentedControl` is now the new atom; Radix Themes' one moved to `RadixSegmentedControl` in `primitives`.
+
+#
+- **`NavBar`** — a sticky top bar for small screens: `title`, `leading` (a back-button slot) and
+  `trailing` (icon buttons). With `largeTitle`, a large left-aligned title sits in the content flow
+  and collapses into a small centred title in the bar as the page scrolls past it. The bar gains
+  `--material-bar` and a hairline only once scrolled; one `IntersectionObserver`, no scroll
+  listeners. Pads for `--safe-top`; height exposed as `--navbar-height`. Accessible: the large title
+  is the single `h1` and the small copy is `aria-hidden` (without `largeTitle` the small title is
+  the `h1`).
+- **`BackButton`** — chevron plus optional `label`, 44px target; with no label its name is `UiStrings.back`.
+- `UiStrings.back` (default "Back").
+- **`TabBar`** / **`TabBarSpacer`** — fixed bottom navigation, 3–5 `items` `{ value, label, icon, activeIcon?, badge?, render? }`; `render` receives the props to spread on a router link (`aria-current="page"` on the active one). 49px + `--safe-bottom` (exposed as `--tabbar-height`), `--material-bar` ground, hairline top, brand-coloured active item, `:active` press feedback, hidden from `hideFrom` (default `md`).
+- **`ActionSheet`** — `{ label, tone, icon?, onSelect }[]` with optional `title` / `message` and a
+  separated Cancel, on the grouped surface. Below `md` it is anchored to the bottom; at `md` and up
+  a small centred dialog. Built on Radix `AlertDialog`: no outside-click dismissal, and focus lands
+  on Cancel so Enter never fires a destructive action. Escape and Cancel run nothing.
+- **`confirm({ title, message, confirmLabel, cancelLabel, tone })`** — resolves `true` on accept and
+  `false` on Cancel, Escape or any other dismissal; never rejects. Callable from anywhere, like
+  `toast()`. Mount one `<ConfirmProvider />` inside `<Theme>`; concurrent calls queue.
+- `UiStrings.cancel` and `UiStrings.confirm` (defaults "Cancel", "Confirm").
+- New dependency: `@radix-ui/react-alert-dialog`.
+- **`Sheet`** — a bottom sheet on Radix Dialog: drag handle, `detent` `medium` | `large` | `fit`
+  (several at once via `detents`), velocity-based dismiss, a scrolling body that hands off to the
+  drag only at scroll-top, a footer above `--safe-bottom` and the keyboard (`visualViewport`), and
+  opt-in `scaleBackground` at `large`. Portals into the nearest Theme like the other floating atoms.
+- **`ResponsiveDialog`** — `Dialog`'s props plus `sheetDetent`; a Dialog at `md` and up, a Sheet below.
+- New dependency: `@radix-ui/react-dialog`.
+- **`ListRow` `swipeActions`** `{ leading?, trailing? }` of `{ label, icon?, tone?, onAction }`, and opt-in
+  `fullSwipe` (past 60% of the row runs the first trailing action). Drag reveals the actions with
+  rubber-banding; one row open per `ListSection`; tap outside, Escape or tapping the row closes it.
+  The gesture is offered only on touch and without `prefers-reduced-motion`. The same actions are
+  always in the row's context menu (right-click, long-press) and in an overflow button — visible
+  when the gesture is off, visually hidden but focusable when it is on.
+- `UiStrings.moreActions` — the overflow button's accessible name (default "More actions").
+
+
+- **`StatTile`** — a compact KPI tile on `Card` (`variant`, `density`): `label`, `value` (tabular numerals), optional `delta` `{ value, direction, tone, label }` with an arrow and a positive/negative/neutral tone independent of direction, a `sparkline` slot, and `href` / `onClick` that make the whole tile a link or button with a chevron.
+- **`ScrollStrip`** — a horizontal scroll-snap row (`snap-x mandatory`, scroll padding equal to `--page-gutter`, hidden scrollbar, items peek at the edge via `itemWidth`) that becomes a `columns`-wide CSS grid from `gridFrom` (default `md`). For KPI rows and card carousels.
+- New token: `--page-gutter` (optional; falls back to 16px).
+
+### Added
+- **`ListSection`, `ListRow` and `ListRowSkeleton`** — a native-style grouped list. A section
+  wraps rows on the grouped surface, with optional `header` and `footer` text outside the group
+  and `variant: 'inset' | 'full'`. Hairlines start after the leading slot. A row takes
+  `leading`, `title`, `subtitle`, `trailing`, `chevron`, `disabled` and `destructive`, and renders
+  a `button` (`onClick`), an `a` (`href`), your own element (`asChild`) or a plain `div`. Rows
+  are at least `--tap-min` tall with a pressed state; hover applies only under
+  `@media (hover: hover)`. Titles truncate, trailing values use tabular numerals. The list is
+  `<ul role="list">`. The skeleton announces `loading` from the strings provider.
+
+
+- **`StatTile`** — a compact KPI tile on `Card` (`variant`, `density`): `label`, `value` (tabular numerals), optional `delta` `{ value, direction, tone, label }` with an arrow and a positive/negative/neutral tone independent of direction, a `sparkline` slot, and `href` / `onClick` that make the whole tile a link or button with a chevron.
+- **`ScrollStrip`** — a horizontal scroll-snap row (`snap-x mandatory`, scroll padding equal to `--page-gutter`, hidden scrollbar, items peek at the edge via `itemWidth`) that becomes a `columns`-wide CSS grid from `gridFrom` (default `md`). For KPI rows and card carousels.
+- New token: `--page-gutter` (optional; falls back to 16px).
+
+### Added
+- **Mobile presentation layer in `tokens.css`** — an opt-in "grouped" surface style (cards on a
+  tinted canvas). Tokens: `--surface-grouped`, `--canvas-grouped`, `--separator-inset`,
+  `--radius-group` (12px), `--space-row-y` / `--space-row-x` (10 / 12px), `--tap-min` (44px),
+  `--safe-top/right/bottom/left` (`env(safe-area-inset-*)`, 0 fallback) and a translucent
+  `--material-bar` with `--material-bar-filter` (`saturate(180%) blur(20px)`).
+- Tailwind utilities: `bg-grouped`, `bg-canvas-grouped`, `border-separator-inset`,
+  `rounded-group`, `min-h-tap`, `pt-safe`, `pb-safe`, `px-safe`, `bg-material`.
+- Gray-11 and gray-12 text passes WCAG AA on the card, canvas and bar in light and dark
+  (`test/grouped.test.tsx`). README section with a before/after example.
+
+- **`Card` `variant` and `density`** (also on `CardHeader`, `CardBody`; `density` on
+  `CardTitle`). `variant`: `outlined` (default, the current look), `grouped` (no border or
+  shadow, `bg-grouped`, `rounded-group`) or `plain` (no surface). `density`: `comfortable`
+  (default) or `compact` (row spacing tokens, smaller title). Both take Radix-style responsive
+  objects (`{ initial: 'grouped', md: 'outlined' }`, breakpoints `initial`, `xs`, `sm`, `md`,
+  `lg`, `xl`). Parts inherit from the `Card` and can override. `raised` is kept, and ignored by
+  `grouped` and `plain`. Exports `CardVariant`, `CardDensity`, `Responsive`. Responsive values
+  are data attributes matched by media queries in `tokens.css` (Radix breakpoints, not
+  Tailwind's). Example in `examples/Cards.tsx`, tests in `test/Card.test.tsx`.
+
+No visual change to existing atoms.
+
+## 0.10.0 — 2026-10-19
+
+### Added
+- **`NotificationCard`** — a persistent rich toast in a viewport corner: icon, title,
+  description, collapsible body and actions; controlled or uncontrolled; `onDismiss(reason)`;
+  non-modal, Escape only while focused; a labelled `section`, not a live region.
+
+### Changed
+- **`Drawer` never portals to `<body>`.** Without a `<Theme>` above it, it renders in place;
+  inside one, its portal is wrapped in a nested `<Theme>` so it keeps the appearance.
+- README rewritten as a generic presentation of the library.
+
+## 0.9.1 — 2026-10-18
 
 ### Fixed
 - **`Drawer` renders inside the nearest `<Theme>`** (`.radix-themes`) instead of under
   `<body>`. Outside a Theme none of the house tokens or the accent are defined, so in 0.9.0 the
-  sheet lost the app's appearance — a dark app got a light sheet. Falls back to `<body>` when
+  sheet lost the app's appearance — a dark app got a light sheet. Falls back to `<body>` when
   there is no Theme; `container` still overrides it.
 - In `modal` mode, everything outside the sheet goes `inert` at every level up to `<body>`, not
   only the sheet's siblings, now that the sheet sits inside the Theme rather than beside it.
 
-## 0.9.0 — 2026-10-18
+## 0.9.0 — 2026-10-18
 
 ### Added
 - **`Drawer`**, a bottom sheet with `collapsed` and `expanded` snap points, in two modes:
@@ -25,7 +131,7 @@
 ### Not verified
 - Only exercised in jsdom with simulated pointer events, not on a real touch device.
 
-## 0.8.1 — 2026-10-11
+## 0.8.1 — 2026-10-11
 
 ### Fixed
 - **`Badge` text passes WCAG AA in both appearances.** Soft badges wrote their text in step a11
@@ -46,7 +152,7 @@
 ### Docs
 - README: the colour scales the atoms need, and their order relative to `base.css`.
 
-## 0.8.0 — 2026-10-09
+## 0.8.0 — 2026-10-09
 
 ### Added
 - **Every Radix Themes component the atoms do not wrap**, re-exported unchanged from
@@ -56,11 +162,11 @@
   RadioCards, RadioGroup, ScrollArea, SegmentedControl, TabNav, Table, Tabs, TextField,
   AccessibleIcon, Portal, Reset, Slot, Slottable, ThemePanel, VisuallyHidden. Where an atom
   exists it remains the export under that name.
-- **`ThemeRoot`** — Themes' `<Theme>`, renamed because `Theme` is already this package's type.
+- **`ThemeRoot`** — Themes' `<Theme>`, renamed because `Theme` is already this package's type.
 - **All of Radix Icons** (`@radix-ui/react-icons`, 320 `*Icon` components). `Icon` is
   unchanged and still the house glyph set.
 
-## 0.7.0 — 2026-10-09
+## 0.7.0 — 2026-10-09
 
 ### Added
 - **`Alert`**: an inline message with `type` (`info` default, `warning`, `success`, `error`,
@@ -69,7 +175,7 @@
   theme's own accent. Errors and warnings are `role="alert"`, the rest `role="status"`.
 - **`Skeleton`** (Themes' skeleton) and **`SkeletonText`** (a `lines`-long paragraph placeholder).
 
-## 0.6.1 — 2026-10-08
+## 0.6.1 — 2026-10-08
 
 ### Fixed
 - **`Slider` thumbs always have an accessible name.** Without `fillFrom`, `label` landed on the
@@ -79,7 +185,7 @@
   Radix's bare "Minimum"/"Maximum". Consumers using `fillFrom={min}` only to get a name can
   drop it.
 
-## 0.6.0 — 2026-10-07
+## 0.6.0 — 2026-10-07
 
 ### Added
 - **`RichText`**: a Tiptap editor (StarterKit) under a Radix `Toolbar`. Marks (bold, italic,
@@ -87,22 +193,22 @@
   one, so the toolbar is one tab stop with arrow keys. `value`/`onChange` speak HTML; also
   `placeholder`, `disabled`, `invalid`, `rows`, `aria-label`/`aria-labelledby`, and a ref
   exposing `{ editor, focus }`.
-  Styled as a Themes `TextArea` (surface, size 2) from public tokens — border, focus ring,
-  background, invalid and disabled states — in `.ui-richtext*` in `tokens.css`.
+  Styled as a Themes `TextArea` (surface, size 2) from public tokens — border, focus ring,
+  background, invalid and disabled states — in `.ui-richtext*` in `tokens.css`.
 - `UiStrings` gains `formatting`, `bold`, `italic`, `strike`, `heading`, `bulletList`,
   `orderedList` (English defaults; hosts should translate them).
 
 ### Requires
 - `tokens.css` imported; the editor is unstyled without it.
 
-## 0.5.0 — 2026-10-06
+## 0.5.0 — 2026-10-06
 
 ### Added
 - **`Slider` `fillFrom`**: fills from a fixed value to the thumb, in either direction, instead of
   from `min`. Same units as `value`, clamped to [min, max]; nothing is filled when the thumb sits
   on it. The fill's ends line up with the thumb's centre at every value, using Radix's own
   in-bounds offset. Built on `@radix-ui/react-slider` and styled from Themes' public tokens
-  (`.ui-slider*` in `tokens.css`), because Themes' slider gives no way to place its range —
+  (`.ui-slider*` in `tokens.css`), because Themes' slider gives no way to place its range —
   consumers overriding `.rt-SliderRange` can drop that CSS.
   Single horizontal left-to-right thumb only: with two thumbs, `orientation="vertical"`,
   `inverted` or `dir="rtl"` it is ignored with a development warning. Margin props are not
@@ -115,7 +221,7 @@
 - Without `fillFrom`, `Slider` is still the Radix Themes slider, rendered exactly as in 0.4.0.
 
 ### Requires
-- `tokens.css` imported, as it already must be for toasts — the `fillFrom` path is unstyled
+- `tokens.css` imported, as it already must be for toasts — the `fillFrom` path is unstyled
   without it.
 
 ## 0.4.0