@synopackageland/ui 0.14.11 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.15.1 (2026-10-25)
+
+- Defer responsive width updates to `requestAnimationFrame` so `CardGrid` and other components using `useElementWidth` avoid ResizeObserver delivery loops. Width changes are coalesced into one update per frame, and pending updates are cancelled when the component unmounts. (#53)
+
+## 0.15.0 (2026-10-24)
+
+Visual change in dark mode only; the light theme looks as before.
+
+- Official dark theme (`src/theme/dark.css`, inside `theme.css` and the embedded stylesheets): `<AppRoot color-scheme="dark">`, or `data-ui-color-scheme="dark"` on `<html>`, gives every role a dark value. The greys carry the light page's sage (page `#121513`, card `#1b1f1c`, menu `#242925`); text keeps 4.5:1 on cards, fills and tone tints. The host decides when to switch; the library does not follow `prefers-color-scheme` by itself.
+- `accentScale(color, { dark: true })` and `accentStyle(color, { dark: true })`: thicker tints on the dark card and text steps lightened until they read at 4.5:1 and 7:1; step 9 keeps its white label. AppRoot uses it for `accent` when `color-scheme="dark"`.
+- Colours components drew themselves are tokens now: `--ui-overlay` (dialog and sheet mask), `--ui-drawer-backdrop` (phone drawer), `--ui-scroll-edge-shade`, `--ui-switch-thumb`; a TreeView expander hovers with `--ui-control-bg-hover`. Light values are unchanged.
+- The workbench and gallery dark previews use the library's dark theme; `histoire-dark.css` only paints the frame.
+
 ## 0.14.11 (2026-10-24)
 
 Visual change: the DSM7 light theme's page and neutral greys. Props, slots and exports stay as they were.

package/README.md

@@ -455,6 +455,11 @@ readable on it, and leaves the status tones DSM's:
 </AppRoot>
 ```
 
+The theme has a dark scheme too: `<AppRoot color-scheme="dark">` (or
+`data-ui-color-scheme="dark"` on `<html>` for a full page) switches every
+token, and derives the accent for a dark page. The host decides when, for
+example from `prefers-color-scheme` ([colour system](docs/color-system.md#dark-theme)).
+
 Other tokens are overridden in a stylesheet imported after the library's:
 
 ```css

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -12,6 +12,12 @@ type __VLS_Props = {
      * apps; set it only for a colour that belongs to the app.
      */
     accent?: string;
+    /**
+     * `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.
+     */
+    colorScheme?: 'light' | 'dark';
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
@@ -26,6 +32,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     modalScope: "document" | "app";
     dialogBounds: "app" | "viewport";
+    colorScheme: "light" | "dark";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/index.d.ts

@@ -182,7 +182,7 @@ export type { AboutCheckState, AboutVersionInfo } from './components/composite/a
 export { default as AppRoot } from './components/app/app-root/AppRoot.vue';
 export { APP_ROOT_ATTRIBUTE, APP_ROOT_SELECTOR } from './lib/appRoot';
 export { accentScale, accentStyle } from './lib/accent';
-export type { AccentScale } from './lib/accent';
+export type { AccentOptions, AccentScale } from './lib/accent';
 export { default as AppLayout } from './components/app/app-layout/AppLayout.vue';
 export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
 export { appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_LAYOUT_MIN } from './lib/adaptiveLayout';