@synopackageland/ui 0.23.8 → 0.23.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -190,6 +190,35 @@ The colour, radius, spacing and web tokens are listed in the
190
190
  [README](../README.md#theme-override), [colour system](color-system.md) and
191
191
  [adaptive layout](adaptive-layout.md#safe-overrides).
192
192
 
193
+ ## Corner radius
194
+
195
+ Components round their corners with a role, not a step, so a theme can round
196
+ one kind of surface without the others:
197
+
198
+ | Token | Rounds | Window | Web and phone |
199
+ | --- | --- | --- | --- |
200
+ | `--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 |
201
+ | `--ui-radius-control` | a button, a field, a select, a segment | 4px | 4px |
202
+ | `--ui-radius-container` | a flat block: a card's surface, an inset area, a thumbnail frame | 4px | 4px |
203
+ | `--ui-radius-popover` | a menu, a select or combobox list, a popover, a picker | 4px | 4px |
204
+ | `--ui-radius-panel` | a raised block: a choice card, a framed region, a drop zone, a side drawer, a grid card | 5px | 6px |
205
+ | `--ui-radius-nav` | a navigation row in the sidebar or the top bar | 5px | 6px |
206
+
207
+ Each role defaults to a step of the scale (`--ui-radius-sm`, `-md`, `-lg`),
208
+ and the steps stay public. Override a role to change only that kind of
209
+ surface; override a step on `:root` to move every role on it. The roles are
210
+ declared on `:root` and again on the web and phone presentation roots
211
+ (`adaptive.css`), so a step overridden there still moves them. A step
212
+ overridden on any other element does not reach the roles below it: override
213
+ the role on that element instead.
214
+
215
+ ```css
216
+ :root {
217
+ --ui-radius-panel: 8px; /* choice cards and framed regions only */
218
+ --ui-radius-popover: 6px; /* menus and popovers only */
219
+ }
220
+ ```
221
+
193
222
  ## Motion
194
223
 
195
224
  The components move a little by default: dialogs and their masks fade in and
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synopackageland/ui",
3
- "version": "0.23.8",
3
+ "version": "0.23.9",
4
4
  "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -79,6 +79,34 @@
79
79
  "@tiptap/vue-3": "3.32.1",
80
80
  "zod": "^4.6.5"
81
81
  },
82
+ "devDependencies": {
83
+ "@eslint/js": "10.0.1",
84
+ "@histoire/plugin-vue": "1.0.0-beta.1",
85
+ "@tailwindcss/vite": "4.3.3",
86
+ "@tanstack/vue-virtual": "3.13.39",
87
+ "@vitejs/plugin-vue": "6.0.9",
88
+ "@vue/test-utils": "2.5.1",
89
+ "@vueuse/core": "14.4.0",
90
+ "eslint": "10.11.0",
91
+ "eslint-plugin-vue": "10.11.1",
92
+ "flexsearch": "0.8.212",
93
+ "globals": "17.12.0",
94
+ "histoire": "1.0.0-beta.1",
95
+ "jsdom": "30.1.1",
96
+ "playwright": "1.58.2",
97
+ "reka-ui": "2.11.0",
98
+ "tailwindcss": "4.3.3",
99
+ "typescript": "5.9.3",
100
+ "typescript-eslint": "8.71.0",
101
+ "vite": "7.3.6",
102
+ "vite-plugin-dts": "5.1.1",
103
+ "vitest": "5.0.2",
104
+ "vscode-oniguruma": "2.0.1",
105
+ "vscode-textmate": "9.3.2",
106
+ "vue": "3.5.43",
107
+ "vue-eslint-parser": "10.4.1",
108
+ "vue-tsc": "3.3.11"
109
+ },
82
110
  "engines": {
83
111
  "node": ">=20"
84
112
  },
@@ -89,5 +117,63 @@
89
117
  "reka-ui": "2.11.0"
90
118
  }
91
119
  },
92
- "homepage": "https://www.varvis.me/docs/"
93
- }
120
+ "homepage": "https://www.varvis.me/docs/",
121
+ "scripts": {
122
+ "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
123
+ "dev": "vite build --watch",
124
+ "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",
125
+ "lint": "eslint .",
126
+ "typecheck": "vue-tsc --noEmit -p tsconfig.json",
127
+ "test": "vitest run",
128
+ "test:watch": "vitest",
129
+ "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}",
130
+ "story": "histoire dev",
131
+ "story:build": "histoire build",
132
+ "check:host": "node scripts/dsm-host-shots.mjs",
133
+ "check:switch": "node scripts/check-switch.mjs",
134
+ "check:tabs": "node scripts/check-tabs.mjs",
135
+ "check:mobile": "node scripts/check-mobile-overflow.mjs",
136
+ "check:ui-patch": "node scripts/check-ui-patch.mjs",
137
+ "check:narrow": "node scripts/check-narrow-controls.mjs",
138
+ "check:drawer-form": "node scripts/check-drawer-form.mjs",
139
+ "check:responsive": "node scripts/check-responsive.mjs",
140
+ "check:adaptive": "node scripts/check-adaptive.mjs",
141
+ "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
142
+ "check:json-render": "node scripts/check-json-render.mjs",
143
+ "check:motion": "node scripts/check-motion.mjs",
144
+ "check:topology": "node scripts/check-topology.mjs",
145
+ "check:wizard": "node scripts/check-wizard.mjs",
146
+ "check:edges": "node scripts/check-edges.mjs",
147
+ "check:data-grid": "node scripts/check-data-grid.mjs",
148
+ "check:truncation": "node scripts/check-truncation.mjs",
149
+ "check:link": "node scripts/check-link.mjs",
150
+ "check:text-select": "node scripts/check-text-select.mjs",
151
+ "check:date-picker": "node scripts/check-date-picker.mjs",
152
+ "check:full-page": "node scripts/check-full-page.mjs",
153
+ "check:short-viewport": "node scripts/check-short-viewport.mjs",
154
+ "check:phone-layout": "node scripts/check-phone-layout.mjs",
155
+ "check:phone-bars": "node scripts/check-phone-bars.mjs",
156
+ "check:text-zoom": "node scripts/check-text-zoom.mjs",
157
+ "check:focus-restore": "node scripts/check-focus-restore.mjs",
158
+ "check:detail-surface": "node scripts/check-detail-surface.mjs",
159
+ "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
160
+ "check:npm-metadata": "node scripts/check-npm-metadata.mjs",
161
+ "check:package": "node scripts/check-package-content.mjs",
162
+ "check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
163
+ "notices:update": "node scripts/third-party-notices.mjs --write",
164
+ "notices:check": "node scripts/third-party-notices.mjs --check",
165
+ "check": "bash scripts/docker-check.sh \"npm run gates\"",
166
+ "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
167
+ "check:local-browser": "node scripts/app-local-browser.mjs",
168
+ "check:infotip": "node scripts/check-infotip.mjs",
169
+ "release:stage": "node scripts/stage-release.mjs",
170
+ "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
171
+ "check:acceptance": "node scripts/check-acceptance.mjs",
172
+ "check:palette": "node scripts/check-palette.mjs",
173
+ "gates": "node scripts/gates.mjs",
174
+ "gates:full": "node scripts/gates.mjs --full",
175
+ "check:layout": "node scripts/check-layout.mjs",
176
+ "release:smoke": "node scripts/release-smoke.mjs",
177
+ "check:browser-install": "playwright install chromium webkit"
178
+ }
179
+ }