@synopackageland/ui 0.23.8 → 0.23.9

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 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/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))",