@synopackageland/ui 0.23.7 → 0.23.9

package/docs/color-system.md

@@ -3,7 +3,7 @@
 The theme draws every colour from five 12-step scales built from DSM 7's own
 colours (`src/theme/palette.css`). Components use the semantic tokens
 (`--ui-primary`, `--ui-text-secondary`, …) in `src/theme/dsm7.css`, and each
-of those is one step of a scale. The theme is light only, like DSM 7.
+of those is one step of a scale. The default theme is light, like DSM 7.
 
 ## Scales
 
@@ -110,14 +110,21 @@ step 3, so links and selected labels stay readable on a dark page.
 
 ## Dark theme
 
+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
+that preference.
+
 The dark theme (`src/theme/dark.css`) ships inside `theme.css` and the embedded stylesheets. It applies wherever
 `data-ui-color-scheme="dark"` is set: on the app root (`[data-ui-app]`)
 through `<AppRoot color-scheme="dark">`. With `theme.css` on a page of your own,
 `<html data-ui-color-scheme="dark">` works too; the embedded stylesheets (a DSM
 window) are scoped to the app root and read the attribute only there, never on
 the host's `<html>` (an app with an accent passes `color-scheme="dark"` to
-AppRoot in any case, which derives the accent for it). The library does not follow `prefers-color-scheme` by itself;
-the host decides and sets the attribute.
+AppRoot in any case, which derives the accent for it). The library does not
+follow `prefers-color-scheme` by itself; an app that owns its full page decides
+and sets the attribute.
 
 The same roles, with the light page's sage carried into the greys:
 

package/docs/theme-hooks.md

@@ -27,6 +27,11 @@ here stay implementation details and can change in any release.
 
 ### Application root and layout
 
+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. Only a full page of the app's own (a portal or its
+own browser tab) may follow `prefers-color-scheme` (see [Dark theme](color-system.md#dark-theme)).
+
 | Attribute | On | Values |
 | --- | --- | --- |
 | `data-ui-app` | `AppRoot`'s root and its floating hosts (portals) | present |
@@ -185,6 +190,35 @@ The colour, radius, spacing and web tokens are listed in the
 [README](../README.md#theme-override), [colour system](color-system.md) and
 [adaptive layout](adaptive-layout.md#safe-overrides).
 
+## Corner radius
+
+Components round their corners with a role, not a step, so a theme can round
+one kind of surface without the others:
+
+| Token | Rounds | Window | Web and phone |
+| --- | --- | --- | --- |
+| `--ui-radius-inner` | a part inside a control or a popover: a menu row, a tag, a tooltip, a checkbox box, a small hit area | 3px | 3px |
+| `--ui-radius-control` | a button, a field, a select, a segment | 4px | 4px |
+| `--ui-radius-container` | a flat block: a card's surface, an inset area, a thumbnail frame | 4px | 4px |
+| `--ui-radius-popover` | a menu, a select or combobox list, a popover, a picker | 4px | 4px |
+| `--ui-radius-panel` | a raised block: a choice card, a framed region, a drop zone, a side drawer, a grid card | 5px | 6px |
+| `--ui-radius-nav` | a navigation row in the sidebar or the top bar | 5px | 6px |
+
+Each role defaults to a step of the scale (`--ui-radius-sm`, `-md`, `-lg`),
+and the steps stay public. Override a role to change only that kind of
+surface; override a step on `:root` to move every role on it. The roles are
+declared on `:root` and again on the web and phone presentation roots
+(`adaptive.css`), so a step overridden there still moves them. A step
+overridden on any other element does not reach the roles below it: override
+the role on that element instead.
+
+```css
+:root {
+  --ui-radius-panel: 8px;     /* choice cards and framed regions only */
+  --ui-radius-popover: 6px;   /* menus and popovers only */
+}
+```
+
 ## Motion
 
 The components move a little by default: dialogs and their masks fade in and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.7",
+  "version": "0.23.9",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -79,6 +79,34 @@
     "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@histoire/plugin-vue": "1.0.0-beta.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/vue-virtual": "3.13.39",
+    "@vitejs/plugin-vue": "6.0.9",
+    "@vue/test-utils": "2.5.1",
+    "@vueuse/core": "14.4.0",
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "flexsearch": "0.8.212",
+    "globals": "17.12.0",
+    "histoire": "1.0.0-beta.1",
+    "jsdom": "30.1.1",
+    "playwright": "1.58.2",
+    "reka-ui": "2.11.0",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.71.0",
+    "vite": "7.3.6",
+    "vite-plugin-dts": "5.1.1",
+    "vitest": "5.0.2",
+    "vscode-oniguruma": "2.0.1",
+    "vscode-textmate": "9.3.2",
+    "vue": "3.5.43",
+    "vue-eslint-parser": "10.4.1",
+    "vue-tsc": "3.3.11"
+  },
   "engines": {
     "node": ">=20"
   },
@@ -89,5 +117,63 @@
       "reka-ui": "2.11.0"
     }
   },
-  "homepage": "https://www.varvis.me/docs/"
-}
+  "homepage": "https://www.varvis.me/docs/",
+  "scripts": {
+    "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
+    "dev": "vite build --watch",
+    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
+    "story": "histoire dev",
+    "story:build": "histoire build",
+    "check:host": "node scripts/dsm-host-shots.mjs",
+    "check:switch": "node scripts/check-switch.mjs",
+    "check:tabs": "node scripts/check-tabs.mjs",
+    "check:mobile": "node scripts/check-mobile-overflow.mjs",
+    "check:ui-patch": "node scripts/check-ui-patch.mjs",
+    "check:narrow": "node scripts/check-narrow-controls.mjs",
+    "check:drawer-form": "node scripts/check-drawer-form.mjs",
+    "check:responsive": "node scripts/check-responsive.mjs",
+    "check:adaptive": "node scripts/check-adaptive.mjs",
+    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
+    "check:json-render": "node scripts/check-json-render.mjs",
+    "check:motion": "node scripts/check-motion.mjs",
+    "check:topology": "node scripts/check-topology.mjs",
+    "check:wizard": "node scripts/check-wizard.mjs",
+    "check:edges": "node scripts/check-edges.mjs",
+    "check:data-grid": "node scripts/check-data-grid.mjs",
+    "check:truncation": "node scripts/check-truncation.mjs",
+    "check:link": "node scripts/check-link.mjs",
+    "check:text-select": "node scripts/check-text-select.mjs",
+    "check:date-picker": "node scripts/check-date-picker.mjs",
+    "check:full-page": "node scripts/check-full-page.mjs",
+    "check:short-viewport": "node scripts/check-short-viewport.mjs",
+    "check:phone-layout": "node scripts/check-phone-layout.mjs",
+    "check:phone-bars": "node scripts/check-phone-bars.mjs",
+    "check:text-zoom": "node scripts/check-text-zoom.mjs",
+    "check:focus-restore": "node scripts/check-focus-restore.mjs",
+    "check:detail-surface": "node scripts/check-detail-surface.mjs",
+    "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
+    "check:npm-metadata": "node scripts/check-npm-metadata.mjs",
+    "check:package": "node scripts/check-package-content.mjs",
+    "check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
+    "notices:update": "node scripts/third-party-notices.mjs --write",
+    "notices:check": "node scripts/third-party-notices.mjs --check",
+    "check": "bash scripts/docker-check.sh \"npm run gates\"",
+    "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
+    "check:local-browser": "node scripts/app-local-browser.mjs",
+    "check:infotip": "node scripts/check-infotip.mjs",
+    "release:stage": "node scripts/stage-release.mjs",
+    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
+    "check:acceptance": "node scripts/check-acceptance.mjs",
+    "check:palette": "node scripts/check-palette.mjs",
+    "gates": "node scripts/gates.mjs",
+    "gates:full": "node scripts/gates.mjs --full",
+    "check:layout": "node scripts/check-layout.mjs",
+    "release:smoke": "node scripts/release-smoke.mjs",
+    "check:browser-install": "playwright install chromium webkit"
+  }
+}