vue-dockable-desktop 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -11,6 +11,59 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.4.0] — 2026-09-30
+
+**Parity: react-dockable-desktop 6.3.1, plus react-dockable-desktop 7.2.0 and 7.3.0's skin
+branding.** Branding, part two: your own surfaces and corner shape on any built-in skin. See
+[Your surfaces](docs/manual/10-theming.md#your-surfaces) and [Corners](docs/manual/10-theming.md#corners).
+
+### Added
+
+- **`--vdd-brand-surface`** and **`--vdd-brand-text`**: set per scheme on `:root`, they replace
+  every built-in skin's backgrounds and text — the workspace, panels, tab bar, sidebar, floating
+  windows, modals, drawers, the taskbar, toasts, borders and muted text are all derived from the
+  two. Set both or neither: with only one set, every skin keeps its own surfaces. A skin keeps
+  its shape and effects (macOS's glass, Chrome's tabs, the VS Code accent bar) and each
+  translucent surface keeps the skin's own transparency; the accent, status colours and shadows
+  are not affected.
+- **`--vdd-radius-scale`**: multiplies every corner the library draws — `0` square, `1` each
+  skin's own (the default), `1.5` rounder. Circles and pills stay round. It also scales the
+  radius tokens you set yourself (`--vdd-panel-float-radius`, `--vdd-panel-toolbar-btn-radius`,
+  `--vdd-tab-btn-active-radius`).
+- Manual: **Your surfaces** and **Corners** under Brand your app, the corner habit for custom
+  skins, and the three variables in the token reference.
+
+### Fixed
+
+- **The workspace-edge drop preview was Bootstrap blue** (`#007bff`) in every skin, instead of
+  the skin's accent. It follows `--vdd-accent-color` and `--vdd-brand-accent` now. It shows only
+  while you drag a panel to a workspace edge.
+- **Colours no token reached**: the dock-target chips, the light-mode outline button (the
+  confirm dialog's Cancel) and the frosted panel toolbar painted literal colours in their own
+  rules. They read the surface tokens now, and follow a brand surface; unbranded they are
+  unchanged.
+
+### Tests
+
+- **M16 browser gate** (`scripts/gates/browser/m16.mjs`, real Chrome): the corner radii of every
+  library element and pseudo-element, in all 7 skins × dark/light, match a 1.3.0 baseline with
+  the scale unset, are `0px` at scale `0` and 1.5× at `1.5`, with circles and pills unchanged;
+  with a brand surface set, no colour of any skin's own palette remains — rendered, hovered or as
+  a token — the workspace, panel and tab bar stay distinct, and text on panels meets 4.5:1
+  (muted 3:1); with only one of the two set, a scene matches M15's baseline. M15's gate still
+  holds with no brand set.
+- `test/core/stylesheet.test.ts`, ported from rdd 7.3.0: every corner length is scaled and the
+  library never declares the scale; every coloured surface reads a derived value first, declared
+  only on `:root` and built on the guarded base; no element rule paints a colour of its own.
+- M16 rules (`scripts/gates/m16.mjs`) and two selftest cases. The M15 browser gate's scene
+  helpers moved to `scripts/gates/lib/branding-scenes.mjs`, shared with M16. The playground
+  takes `?bs=`, `?bt=` and `?rs=`.
+
+### Documentation
+
+- Theming chapter: Your surfaces, Corners, the fourth brandable-skin habit, token rows; README
+  snippet; ADR 0018; PARITY.md; the plan's M16.
+
 ## [1.3.0] — 2026-09-29
 
 **Parity: react-dockable-desktop 6.3.1, plus react-dockable-desktop 7.2.0's skin branding**

package/README.md

@@ -24,7 +24,7 @@ so a layout saved by either library loads in the other.
 > matching the two numbers would be a promise that breaks the first time either library needs
 > a breaking change the other does not. Which rdd release a given version corresponds to is
 > stated per release in [CHANGELOG.md](CHANGELOG.md) — this one tracks **rdd 6.3.1**, plus
-> rdd 7.2.0's skin branding — and feature by feature in [docs/PARITY.md](docs/PARITY.md).
+> rdd 7.2.0 and 7.3.0's skin branding — and feature by feature in [docs/PARITY.md](docs/PARITY.md).
 
 ## Install
 
@@ -35,7 +35,7 @@ npm install vue-dockable-desktop
 Requires Vue 3.4+, and a browser with CSS `color-mix()` (Chrome / Edge 111, Safari 16.2,
 Firefox 113 or later). No other runtime dependencies. The published package is
 [`vue-dockable-desktop`](https://www.npmjs.com/package/vue-dockable-desktop); the public API
-is pinned by `api-surface.json` and covered by 846 tests.
+is pinned by `api-surface.json` and covered by 851 tests.
 
 ## Quick start
 
@@ -117,8 +117,17 @@ localStorage.setItem('layout', ws.saveLayout())
   ```
 
   Point them at your UI framework's theme to follow it — `var(--p-primary-color)` (PrimeVue),
-  `var(--bs-primary)` (Bootstrap). See
-  [Brand your app](docs/manual/10-theming.md#brand-your-app)
+  `var(--bs-primary)` (Bootstrap). Your own surfaces and corner shape, too:
+
+  ```css
+  :root:not([data-color-scheme="light"]) {  /* dark: the attribute's absence */
+    --vdd-brand-surface: #0b1f3a;   /* app background — panels, bars and borders derive from it */
+    --vdd-brand-text: #e8eef7;      /* main text — set both, or neither */
+  }
+  :root { --vdd-radius-scale: 0; }  /* 0 square · 1 each skin's own · 1.5 rounder */
+  ```
+
+  See [Brand your app](docs/manual/10-theming.md#brand-your-app)
 - **i18n and RTL** — every string is a message key; `dir="rtl"` flips the whole workspace
 - **TypeScript-first** — complete types, no separate `@types` package