@synopackageland/ui 0.23.7 → 0.23.9

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## 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
+
 ## 0.23.7 (2026-11-08)
 
 Phone fixes: the bars stay shown while the page is near its top, so the room above the content is never given up before content lies under it, and a settings commit footer stays put while the page scrolls and is smaller. No App change is required; a DSM window and desktop are unchanged.

package/README.md

@@ -476,25 +476,32 @@ readable on it, and leaves the status tones DSM's:
 </AppRoot>
 ```
 
-The theme has a dark scheme too: `<AppRoot color-scheme="dark">` switches
+In a DSM window, leave AppRoot's `color-scheme` unset and do not set
+`data-ui-color-scheme`. DSM draws the window light, even when the operating
+system prefers dark mode. Do not follow `prefers-color-scheme` in a DSM window.
+
+Only a full page of the app's own (a portal or its own browser tab) may follow
+`prefers-color-scheme`. There, `<AppRoot color-scheme="dark">` switches
 every token, and derives the accent for a dark page. AppRoot puts
 `data-ui-color-scheme="dark"` on its root (`[data-ui-app]`); set the attribute
 there yourself only without AppRoot. The embedded stylesheets
 (`themes/dsm7-embedded*.css`, a DSM window) read it only on `[data-ui-app]`, never on
 the host's `<html>`; `<html data-ui-color-scheme="dark">` works only with
-`theme.css`, on a page of your own. The host decides when, for
-example from `prefers-color-scheme` ([colour system](docs/color-system.md#dark-theme)).
+`theme.css`, on a page of your own ([colour system](docs/color-system.md#dark-theme)).
 
 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/app/app-root/AppRoot.vue.d.ts

@@ -14,6 +14,8 @@ type __VLS_Props = {
      */
     accent?: string;
     /**
+     * Leave unset in a DSM window; DSM draws it light.
+     * Only a full page of the app's own may follow `prefers-color-scheme`.
      * `dark` draws the app in the dark theme (src/theme/dark.css), and derives the
      * accent for it. A full page can set `data-ui-color-scheme="dark"` on
      * `<html>` instead, but then passes `dark` here too when it sets an accent.

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))",