@synopackageland/ui 0.23.8 → 0.25.0

package/docs/callout.md

@@ -103,9 +103,9 @@ halfway across. A Callout drops it: it stays on the page, where DSM draws its
 notes with no decoration.
 
 The title reads in the text colour at 600, and the message under it in the
-secondary text colour. Corners are 12px (`--ui-callout-radius`), rounder than
-a card on purpose: a Callout floats above the settings rather than being one
-of them. Buttons in `#actions` and a toast's action are capsules. A Callout
+secondary text colour. Corners follow `--ui-radius-callout` (10px in a DSM window, 12px on a full
+page and mobile; `--ui-callout-radius` overrides it), rounder than a card on
+purpose: a Callout floats above the settings rather than being one of them. Buttons in `#actions` and a toast's action are capsules. A Callout
 fades in and rises 6px when it appears, and a toast slides in; with reduced
 motion both appear at once.
 

package/docs/mobile-native.md

@@ -22,6 +22,37 @@ App. Each line links to its details below.
 | No end space under docked bars | The room under the last row is constant (`--ui-page-end-space`, plus `--ui-bars-room` under docked bars); a fill page's list runs under the FAB and bars to the screen's bottom with no blank band, also when that list is an App's own element nested in the page. |
 | Gesture velocity | One estimator and one set of thresholds for every gesture decision the UI makes. See [Gesture velocity](#gesture-velocity). |
 
+## Phone look
+
+Since 0.25 a touch phone (narrow and a coarse pointer, the phone tokens'
+gate) draws softer than a DSM window: a pale page with white cards on it and
+no frames, round corners, more air and bigger text. It is all in
+`src/theme/phone.css`, inside `@media (pointer: coarse)` and scoped to the
+phone presentation; a desktop, a DSM window (also one narrowed with a mouse)
+and a touch tablet are unchanged. Tap boxes, bar heights, hide on scroll and
+the commit footer behave as before.
+
+| Token or part | Before (phone) | Phone look |
+| --- | --- | --- |
+| Page under cards (`--ui-page-canvas`) | `#fafbf9` | `#f1f3f0` (dark: the dark page, `#121513`) |
+| Card | white, 1px frame, card shadow, 6px corner | white, no frame, 1px soft shadow (none in dark), `--ui-radius-card` 20px |
+| Section list (SectionTabs' phone list) | framed group, 6px corner, 44px rows, full-width rules | inset grouped list: white group, 20px corner, 52px rows, hairlines inset 16px, on the mist |
+| A list of ListItems on the page (`role="list"`, `ul`, `ol`, outside a card, sheet or dialog) | full-bleed rows, full-width rules | the same inset grouped list: one white group per list, rows inset 16px, hairlines from the text's edge, the heading just above it inset to the text |
+| Page background | the mist only on a page of cards | the mist on every page (not a data-grid page or `surface="none"`); a sticky row and `--ui-app-web-surface` follow it |
+| `--ui-radius-md` / `-lg` (and the 0.23.9 roles on them) | 4 / 6 | 12 / 14: md rounds the control, container and popover roles (fields, tool buttons, inset blocks, menus), lg the panel and nav roles |
+| `--ui-radius-dialog` / `-window` / `-sheet` | 8 / 8 / 12 | 24 |
+| Primary, danger and secondary buttons | capsule (action) or 4px (tool) | capsule; a primary's fill is accent step 10 (`#0075db`, 4.6:1 with white) |
+| Segmented control | accent pill on a framed track, equal columns | ink pill (`--ui-phone-ink`, `#1f2421`; dark `#e3e8e4`) on a frameless mist track; 6px sides; up to three segments stay equal columns but one whose label is wider than its share grows to it, so a label is not cut (four ellipsize as before) (`check:phone-layout` checks it) |
+| Phone bar | white with a hairline | the page's colour, no hairline, 17px bold title, round pressed tint |
+| Tab bar | full-width white row with a top rule | a floating white pill inset 16px, 8px above the bottom (`--ui-tab-bar-float`); the current tab is ink on a round pad |
+| `--ui-text-muted` | 40% grey (2:1) | 80% (4.8:1 on the mist; dark 62%) |
+| Separators | `--ui-border-subtle` | `--ui-phone-separator` |
+
+An App that sets `--ui-mobile-bar-bg`, `--ui-mobile-bar-border` or
+`--ui-tab-bar-bg` keeps its colour. The tab bar's box keeps the full width and
+adds the float gap below the pill, so the room AppLayout measures for the
+bottom bars, the FAB's offset and the end space follow it.
+
 ## Width containment and the release gate
 
 Typography tables scroll horizontally within their parent, including a flex
@@ -75,12 +106,12 @@ control and grid sizes; it does not change the 16px field rule.
 
 | Token | Desktop | Touch tablet | Phone | Used for |
 |---|---|---|---|---|
-| `--ui-font-size` | 13 | 13 | **14** | primary text: list and record titles, field values, body copy, menu items |
-| `--ui-font-size-sm` | 12 | 12 | **12** | secondary text: labels, meta, captions, helper text, badges |
+| `--ui-font-size` | 13 | 13 | **15** | primary text: list and record titles, field values, body copy, menu items |
+| `--ui-font-size-sm` | 12 | 12 | **13** | secondary text: labels, meta, captions, helper text, badges |
 | `--ui-font-size-xs` (new) | 12 | 12 | 12 | the smallest text anywhere |
-| `--ui-line-height` | 20 | 20 | **20** | body line |
-| `--ui-font-size-lg` | 14 | 14 | **15** | card and section titles |
-| `--ui-font-size-title` | 16 | 16 | **16** | header and dialog titles |
+| `--ui-line-height` | 20 | 20 | **22** | body line |
+| `--ui-font-size-lg` | 14 | 14 | **17** | card and section titles |
+| `--ui-font-size-title` | 16 | 16 | **17** | header and dialog titles |
 | `--ui-grid-font-size` (new) | 13 | 13 | **14** | grid cell text (not yet read by the canvas grid; see below) |
 | `--ui-font-size-field` (new) | 16 | 16 | 16 | every field on a coarse pointer, to stop iOS focus zoom |
 | `--ui-control-md` | 28 | **44** | **44** | fields, selects, form and sheet buttons |
@@ -91,15 +122,15 @@ control and grid sizes; it does not change the 16px field rule.
 | `--ui-grid-row-height` / `-header-height` | 28 | **36** | **32** | canvas grid rows (docs/ux-grid.md) |
 | `--ui-list-row-height` | 32 | **44** | **44** | list rows, a DisclosureRow |
 | `--ui-menu-row-height` | 32 | **44** | **44** | menu, select and sheet list rows |
-| `--ui-page-padding-x` / `-y` | 16 (narrow layout 12) | 16 | **12** | page gutter |
-| `--ui-section-gap` | 12 | 12 | **12** | space between sections |
-| `--ui-card-padding` | 20 (Card default) | 20 | **12** | card inset |
+| `--ui-page-padding-x` / `-y` | 16 (narrow layout 12) | 16 | **16 / 12** | page gutter |
+| `--ui-section-gap` | 12 | 12 | **16** | space between sections |
+| `--ui-card-padding` | 20 (Card default) | 20 | **16** | card inset |
 | `--ui-chrome-height` | 44 (web 48, narrow layout 44) | – | **44** | the phone bar (plus its 1px rule) |
 | `--ui-tab-bar-height` | – | – | **48** | the tab bar's row, above `--ui-safe-bottom` |
 | `--ui-section-tab-height` | 44 | 44 | **40** | the drawn height of a phone's tabs strip (its tap box stays 44) |
 | `--ui-sticky-top-offset` | 0 | 0 | measured | what sticks at the top of a PageContent (see below) |
 | `--ui-page-end-space` | 24 | 24 | 24 (constant: hiding the bars never changes it) | room after a page's last row |
-| `--ui-radius-sheet` (new) | 12 | 12 | 12 | top corners of a bottom sheet |
+| `--ui-radius-sheet` (new) | 12 | 12 | **24** | top corners of a bottom sheet |
 | `--ui-safe-top/right/bottom/left` (new) | `env(safe-area-inset-*, 0px)` | same | same | notch and home indicator; non-zero only once the viewport meta has `viewport-fit=cover` |
 | `--ui-pressed` (new) | 8% of the text colour | same | same | the pressed tint |
 

package/docs/theme-hooks.md

@@ -182,7 +182,7 @@ before the token existed. Set them on the app root or any ancestor.
 | `--ui-mobile-bar-fg` | the phone bar's text, menu button and brand | `var(--ui-text-secondary)` (text), `var(--ui-text)` (button, brand) |
 | `--ui-mobile-bar-border` | the phone bar's bottom rule | `var(--ui-border-subtle)` |
 | `--ui-callout-max-width` | caps how wide a `Callout` grows; it spans its container by default | none |
-| `--ui-callout-radius` | a `Callout`'s and a `Toast`'s corners | 12px |
+| `--ui-callout-radius` | a `Callout`'s and a `Toast`'s corners | `--ui-radius-callout` (window 10px, web and mobile 12px) |
 | `--ui-callout-glow` | how strong the tone's glow is behind a `Callout`'s or `Toast`'s icon; a dark theme raises it (workbench: 14%) | 9% |
 | `--ui-callout-shadow` | the shadow under a `Callout` and a `Toast` (workbench dark: `0 10px 28px -12px rgba(0, 0, 0, 0.6)`) | `0 8px 24px -12px rgba(15, 23, 42, 0.18)` |
 
@@ -190,10 +190,70 @@ 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. Since 0.25 a DSM window rounds a step
+softer than DSM's own 3-5px and a full page softer still; the mobile
+presentation keeps the steps (a phone rounds them itself, `phone.css`):
+
+| Token | Rounds | Window | Web | Mobile | Touch 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 | 4px | 6px | `sm` (3px) | 3px |
+| `--ui-radius-control` | a button, a field, a select, a segment | 6px | 8px | `md` (4px) | 12px |
+| `--ui-radius-container` | a flat block: a card's surface, an inset area, a thumbnail frame | 8px | 10px | `md` (4px) | 12px |
+| `--ui-radius-popover` | a menu, a select or combobox list, a popover, a picker | 8px | 10px | `md` (4px) | 12px |
+| `--ui-radius-panel` | a raised block: a choice card, a framed region, a drop zone, a side drawer, a grid card | 8px | 12px | `lg` (6px) | 14px |
+| `--ui-radius-nav` | a navigation row in the sidebar or the top bar | 6px | 8px | `lg` (6px) | 14px |
+| `--ui-radius-window` | a dialog with a title bar | 10px | 14px | 8px | 24px |
+| `--ui-radius-dialog` | a message box | 10px | 14px | 8px | 24px |
+| `--ui-radius-callout` | a `Callout` and a `Toast` (`--ui-callout-radius` still wins) | 10px | 12px | 12px | 12px |
+
+A part inside a popover stays concentric with it: a menu row (`inner`, 4px) sits
+4px inside its menu (`popover`, 8px). What floats highest rounds most.
+
+The steps `--ui-radius-sm`, `-md` and `-lg` stay public at DSM's 3, 4 and 5px
+for an App's own parts. On the mobile presentation the roles follow the steps
+(declared again on its root in `adaptive.css`), so a step overridden there
+moves them. On a touch phone (docs/mobile-native.md, "Phone look") the phone
+scope sets the steps `--ui-radius-md` to 12px and `-lg` to 14px, so the roles
+follow them there; a card on a page of cards and a grouped list take
+`--ui-radius-card` (20px), and a sheet `--ui-radius-sheet` (24px).
+
+Override a role to change only that kind of surface:
+
+```css
+:root {
+  --ui-radius-panel: 8px;     /* choice cards and framed regions only */
+  --ui-radius-popover: 6px;   /* menus and popovers only */
+}
+```
+
+To keep the pre-0.25 corners in a DSM window, set the roles back to the steps:
+`inner` 3px, `control`, `container` and `popover` 4px, `panel` and `nav` 5px,
+`window` 3px, `dialog` 6px, `callout` 12px.
+
+## Focus, hover and the scrim
+
+| Token | What | Value |
+| --- | --- | --- |
+| `--ui-focus-ring` | the keyboard focus colour | the accent (`--ui-accent-9`), solid |
+| `--ui-shadow-focus` | keyboard focus on a control: a 2px gap in the surface colour, then a 2px ring | `0 0 0 2px surface, 0 0 0 4px ring` |
+| `--ui-shadow-focus-inset` | keyboard focus inside a row, a cell or a tab strip | `inset 0 0 0 2px ring` |
+| `--ui-shadow-focus-field` | a focused field, whose own border turns primary: a soft halo | `0 0 0 3px` `--ui-focus-halo` (`--ui-accent-a4`) |
+| `--ui-state-hover` | the pointer on a ghost button or a menu row | 6% of the text colour |
+| `--ui-state-pressed` | pressed (a ghost button, a touch control while the finger is down) | 8% of the text colour; `--ui-pressed` is a deprecated alias |
+| `--ui-surface-hover` | the pointer on a list or table row (DSM's pale blue) | `--ui-accent-a2` |
+| `--ui-overlay` | the scrim behind a modal | window: white 55%; web: `--ui-overlay-page`; mobile: `--ui-overlay-dim` (black 40%, as before) |
+| `--ui-overlay-page` | the scrim on a full page | `rgba(15, 23, 32, 0.32)`; dark `rgba(0, 0, 0, 0.5)` |
+
+A component never writes a ring out (`shadow-[0_0_0_3px_…]`); it uses one of
+the focus tokens (`tests/css/focus-ring.test.ts`).
+
 ## Motion
 
 The components move a little by default: dialogs and their masks fade in and
-settle from 97 %, menus, popovers and select lists drop 4px from their trigger,
+settle from 97 %, menus, popovers and select lists drop 6px from their trigger (settling from 96 %),
 a notification slides 8px in, expandable bodies (`Card`, `SettingsSection`,
 `ExpandableItem`, `Callout` details, `TimelineRow`, `FacetPanel`, `Accordion`,
 `Fieldset`) open their height, a row the user just added fades in, and a tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.8",
+  "version": "0.25.0",
   "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"
+  }
+}