@synopackageland/ui 0.23.8 → 0.25.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 ## Unreleased
 
+## 0.25.0 (2026-11-09)
+
+A softer, less boxy look everywhere. On a touch phone: a pale page with white frameless cards, round corners (cards 20px, fields 12px, sheets and dialogs 24px, buttons and segmented controls capsules), a 16px gutter and card inset, 15px text on a 22px line, inset grouped lists, a floating pill tab bar and an ink segmented control. In a DSM window and on a full page: rounder corners by role, one solid focus ring, a white mist (window) or blue-grey (full page) behind a modal, dialog rules only where the body scrolls, a tighter card header, underlined tabs on a full page and a neutral hover layer. The phone takes the focus ring and the hover layer too, and keeps its own corners, spacing, tabs and scrim. No API change and no App change is required; an App with pixel snapshots needs new baselines.
+
+### Touch phone
+
+- New `src/theme/phone.css` (in every theme), all inside `@media (pointer: coarse)` and scoped to the phone presentation. docs/mobile-native.md, "Phone look", lists every value before and after
+- Phone tokens: `--ui-font-size` 15 (was 14), `-sm` 13 (12), `-lg` 17 (15), `-title` 17 (16), `--ui-line-height` 22 (20), `--ui-page-padding-x` 16 (12), `--ui-section-gap` 16 (12), `--ui-card-padding` 16 (12), `--ui-radius-md` 12 (4) and `-lg` 14 (6), which the 0.23.9 roles follow (control, container and popover 12; panel and nav 14), `-dialog`/`-window`/`-sheet` 24 (8/8/12); new `--ui-radius-card` 20, `--ui-phone-ink`, `--ui-phone-separator`, `--ui-tab-bar-float` 8
+- Contrast (WCAG AA): phone muted text is 80% grey (4.8:1 on the page; it was 2:1) and 62% in dark (5.7:1); a primary button's fill is the accent's step 10 (4.6:1 with its white label; step 9 was 4.0:1)
+- Tap boxes stay 44px; hide on scroll, the commit footer, the FAB and the end space are unchanged (the FAB, a toast and the page end follow the floating tab bar's 8px gap)
+- Every phone page is on the mist, not only a page of cards (a list, a live and a record page too; a data-grid page and `surface="none"` keep their own). A sticky row and a heading painted with `--ui-app-web-surface` follow the page's colour
+- A list of ListItems on the page (`role="list"`, `ul` or `ol` holding only ListItems, outside a card, sheet or dialog) is an inset grouped list: a white group with the card's corner, rows inset 16px, straight hairlines from the text's edge, and the heading right above it on the rows' text. ListItem separators are straight everywhere (a rounded row bent its top border)
+- Segmented control on a phone: 6px sides and the selected label keeps its weight; up to three segments stay equal columns but one whose label is wider than its share grows to it (the others share the rest), so a label is not cut; four keep equal columns that ellipsize ("Transcript 45" in a three-way control at 390)
+- `check:phone-layout` fails when a label in a segmented control of up to three truncates; the record fixture's view control is a three-way one with a count
+- `tests/css/hit-slop-component-edge.test.ts` expects the phone's 16px gutter
+
+### DSM window and full page
+
+- **Corners by role** ([theme hooks](docs/theme-hooks.md#corner-radius)). DSM window: `inner` 4px (was 3), `control` 6 (4), `container` 8 (4), `popover` 8 (4), `panel` 8 (5), `nav` 6 (5), `window` 10 (3), `dialog` 10 (6). Full page: `inner` 6 (3), `control` 8 (4), `container` 10 (4), `popover` 10 (4), `panel` 12 (6), `nav` 8 (6), `window` 14 (8), `dialog` 14 (8). A menu row stays concentric with its menu. New `--ui-radius-callout` (window 10, web and mobile 12) for a Callout and a Toast; `--ui-callout-radius` still wins. The mobile presentation keeps its roles on the steps, so a touch phone's steps (below) round them. The steps `--ui-radius-sm/md/lg` keep 3/4/5px. The rule "no corner more than 2px rounder than a card" is retired; the theme hooks list the pre-0.25 values for an App that wants them back
+- **One solid focus ring.** `--ui-focus-ring` is the accent itself (was 45% of it); `--ui-shadow-focus` is a 2px surface gap and a 2px ring (was 1px and 2px). New `--ui-shadow-focus-inset` (a row, a cell, a tab) and `--ui-shadow-focus-field` (a field: its border turns primary with a 3px `--ui-focus-halo` halo). The 61 rings written out in components and theme CSS now use these tokens (`tests/css/focus-ring.test.ts`)
+- **Scrim.** A DSM window mists the page in white at 55% behind a modal (was black 40% with a 1px blur; the blur is gone everywhere). A full page dims in `--ui-overlay-page`, a blue-grey at 32%. The mobile presentation keeps black 40% (`--ui-overlay-dim`); dark is unchanged
+- **Dialog rules.** The header rule shows only once the body has scrolled under it, and the footer rule only while more lies below; a `flush` body keeps both. `useScrollEdges` now follows a scroller that renders after mount
+- **Card.** Under a header the body starts at the header's own 12px below the title (was 12 + 16px), so the title reads with its content. A card without a header is unchanged
+- **Tabs on a full page.** A 2px accent underline under the selected tab (sliding like the notch); unselected tabs are 500, and each tab reserves its bold width (`data-ui-tab-label`) so the row does not shift. A DSM window and the mobile presentation keep DSM's notch and bold labels
+- **State layer.** New `--ui-state-hover` (6% of the text colour) and `--ui-state-pressed` (8%). A ghost `Button` and `IconButton` and the rows of `DropdownMenu` and `ContextMenu` use them instead of the pale-blue hover and the accent highlight. Lists, tables and `Select` lists keep DSM's pale-blue row hover. `--ui-pressed` is now a deprecated alias of `--ui-state-pressed`
+- **Popups** drop 6px from their trigger and settle from 96% (were 4px and 97%)
+
+## 0.23.9 (2026-11-08)
+
+Semantic corner radius tokens, with no visual change. Each role resolves to the step it replaces, so every corner keeps its size in a DSM window, on the web and on a phone.
+
+- New tokens `--ui-radius-inner` (3px), `--ui-radius-control` (4px, already public), `--ui-radius-container` (4px), `--ui-radius-popover` (4px), `--ui-radius-panel` (5px; web and phone 6px) and `--ui-radius-nav` (5px; web and phone 6px), with Tailwind aliases `rounded-ui-inner` … `rounded-ui-nav`. Components round with a role instead of `--ui-radius-sm`, `-md` and `-lg`, so a theme can round raised blocks without rounding fields ([theme hooks](docs/theme-hooks.md#corner-radius))
+- The steps `--ui-radius-sm`, `-md` and `-lg` stay public. Overriding one on `:root` or on the web or phone presentation root (`[data-ui-app]`, `[data-ui-layout-mode]`) still moves every role on it; overriding one on any other element no longer reaches the components inside it, so override the role there instead
+
 ## 0.23.8 (2026-11-08)
 
 - Document that DSM windows leave AppRoot's `color-scheme` and `data-ui-color-scheme` unset so the app stays light with its DSM window, even under an operating system's dark preference. Only an app's own full page (a portal or its own browser tab) may follow `prefers-color-scheme`. README, the colour system, theme hooks and AppRoot's prop documentation state the rule

package/README.md

@@ -493,12 +493,15 @@ Other tokens are overridden in a stylesheet imported after the library's:
 
 ```css
 :root {
-  --ui-radius-md: 6px;
+  --ui-radius-control: 6px;
   --ui-page-padding-x: 24px;
   --ui-section-gap: 16px;
 }
 ```
 
+Corners are rounded by role (`--ui-radius-inner`, `-control`, `-container`,
+`-popover`, `-card`, `-nav`); see [corner radius](docs/theme-hooks.md#corner-radius).
+
 Status tones come in pairs, a soft fill and the text that reads on it:
 `--ui-{neutral,info,success,warning,danger}-soft` and `-text`. `Badge`,
 `StatusDot`, `StepList` and `ConnectionTopology` use only these and the base

package/dist/components/primitives/tooltip/tooltipStyle.d.ts

@@ -1,4 +1,4 @@
-export declare const TOOLTIP_CONTENT_CLASS = "z-[1450] max-w-[min(18rem,var(--reka-popper-available-width,18rem))] rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-3 py-1.5 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";
+export declare const TOOLTIP_CONTENT_CLASS = "z-[1450] max-w-[min(18rem,var(--reka-popper-available-width,18rem))] rounded-[var(--ui-radius-inner)] bg-[var(--ui-tooltip-bg)] px-3 py-1.5 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";
 /** Gap between a tooltip and its trigger. */
 export declare const TOOLTIP_OFFSET = 6;
 /** The first tooltip waits this long (interaction-spec §1.1). */

package/dist/composables/scrollEdges.d.ts

@@ -3,7 +3,8 @@ export type ScrollEdgesAxis = 'x' | 'y' | 'both';
 /** Whether a scroller has more content before (`start`, `top`) or after
  * (`end`, `bottom`) what it shows. `axis` picks the horizontal pair (`x`, the
  * default), the vertical pair (`y`) or both. Follows scrolling and size
- * changes of the scroller and of its content. */
+ * changes of the scroller and of its content, and a scroller that renders
+ * after mount (a dialog's body) or is replaced. */
 export declare function useScrollEdges(viewport: Readonly<ShallowRef<HTMLElement | null>>, axis?: () => ScrollEdgesAxis): {
     start: import('vue').Ref<boolean, boolean>;
     end: import('vue').Ref<boolean, boolean>;

package/dist/grid.js

@@ -1270,7 +1270,7 @@ function _a(e) {
     "min-width": "120px",
     "box-sizing": "border-box",
     padding: "4px 8px",
-    "border-radius": "var(--ui-radius-sm, 4px)",
+    "border-radius": "var(--ui-radius-inner, 4px)",
     background: "var(--ui-surface-raised, var(--ui-surface))",
     "box-shadow": "var(--ui-shadow-menu)",
     color: "var(--ui-danger-text, var(--ui-danger))",