0.5.1: replace properties checkboxes with icon toggles

All checkboxes and radio buttons in the Properties panel are now
icon-toggle buttons:

- Polygon "Closed path" → PhPolygon button (fill weight when closed)
- Fill/Stroke transparent → PhEye / PhEyeSlash toggle next to the swatch
- Mask use → PhMaskHappy toggle
- Mask mode → segmented control with PhPlus / PhMinus (negative is red)

Shared .icon-toggle style: 26×26, panel background, accent when active,
optional .danger variant. Tests updated to click buttons instead of
checkboxes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.7 committed 2026-04-20 12:18:47 +02:00
1 parent ddea7d348f
commit cbc309bc8c
4 files changed
+149 -92

No files matched your search

+1 -1
View File
@@ -2399,7 +2399,7 @@ export function registerAllTests(): void {
suite('properties — fill/stroke transparent toggle', () => {
function findAlphaToggles(host: HTMLElement) {
return Array.from(
host.querySelectorAll<HTMLInputElement>('.alpha-toggle input[type="checkbox"]'),
host.querySelectorAll<HTMLButtonElement>('button.alpha-toggle-btn'),
)
}