@tutti-os/workbench-surface 0.0.44 → 0.0.45

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.
Files changed (5) hide show
  1. package/dist/index.js +13 -2
  2. package/dist/index.js.map +1 -1
  3. package/dist/styles/workbench.css +35 -8
  4. package/dist/styles/workbenchStyle.test.ts +12 -0
  5. package/package.json +5 -5
package/dist/styles/workbench.css CHANGED
@@ -273,24 +273,51 @@
273
273
  transition: background-color 160ms ease;
274
274
  }
275
275
 
276
- .workbench-window-traffic-light:hover,
277
- .workbench-window-traffic-light:focus-visible {
276
+ .workbench-window-traffic-light__icon {
277
+ position: absolute;
278
+ z-index: 1;
279
+ inset: 5px;
280
+ width: 10px;
281
+ height: 10px;
282
+ color: color-mix(in srgb, #000 68%, transparent);
283
+ opacity: 0;
284
+ pointer-events: none;
285
+ transition: opacity 120ms ease;
286
+ }
287
+
288
+ .workbench-window-traffic-lights:hover .workbench-window-traffic-light,
289
+ .workbench-window-traffic-lights:focus-within .workbench-window-traffic-light {
278
290
  opacity: 1;
291
+ }
292
+
293
+ .workbench-window-traffic-light:focus-visible {
279
294
  outline: none;
280
295
  }
281
296
 
282
- .workbench-window-traffic-light[data-workbench-traffic-light="close"]:hover::before,
283
- .workbench-window-traffic-light[data-workbench-traffic-light="close"]:focus-visible::before {
297
+ .workbench-window-traffic-lights:hover .workbench-window-traffic-light__icon,
298
+ .workbench-window-traffic-lights:focus-within
299
+ .workbench-window-traffic-light__icon {
300
+ opacity: 1;
301
+ }
302
+
303
+ .workbench-window-traffic-lights:hover
304
+ .workbench-window-traffic-light[data-workbench-traffic-light="close"]::before,
305
+ .workbench-window-traffic-lights:focus-within
306
+ .workbench-window-traffic-light[data-workbench-traffic-light="close"]::before {
284
307
  background-color: #ff5f57;
285
308
  }
286
309
 
287
- .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]:hover::before,
288
- .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]:focus-visible::before {
310
+ .workbench-window-traffic-lights:hover
311
+ .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]::before,
312
+ .workbench-window-traffic-lights:focus-within
313
+ .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]::before {
289
314
  background-color: #ffbd2e;
290
315
  }
291
316
 
292
- .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]:hover::before,
293
- .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]:focus-visible::before {
317
+ .workbench-window-traffic-lights:hover
318
+ .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]::before,
319
+ .workbench-window-traffic-lights:focus-within
320
+ .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]::before {
294
321
  background-color: #28c840;
295
322
  }
296
323
 
package/dist/styles/workbenchStyle.test.ts CHANGED
@@ -23,6 +23,18 @@ test("traffic lights keep visual layout while expanding the pointer hit area", (
23
23
  css,
24
24
  /\.workbench-window-traffic-light::before\s*{[^}]*inset:\s*4px;[^}]*content:\s*"";[^}]*transition:\s*background-color 160ms ease;/s
25
25
  );
26
+ assert.match(
27
+ css,
28
+ /\.workbench-window-traffic-light__icon\s*{[^}]*inset:\s*5px;[^}]*width:\s*10px;[^}]*height:\s*10px;[^}]*opacity:\s*0;[^}]*transition:\s*opacity 120ms ease;/s
29
+ );
30
+ assert.match(
31
+ css,
32
+ /\.workbench-window-traffic-lights:hover\s+\.workbench-window-traffic-light__icon,\s*\.workbench-window-traffic-lights:focus-within\s+\.workbench-window-traffic-light__icon\s*{[^}]*opacity:\s*1;/s
33
+ );
34
+ assert.match(
35
+ css,
36
+ /\.workbench-window-traffic-lights:hover\s+\.workbench-window-traffic-light\[data-workbench-traffic-light="close"\]::before,\s*\.workbench-window-traffic-lights:focus-within\s+\.workbench-window-traffic-light\[data-workbench-traffic-light="close"\]::before\s*{[^}]*background-color:\s*#ff5f57;/s
37
+ );
26
38
  });
27
39
 
28
40
  test("floating window corner resize handles do not intrude further than the edge handles", () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tutti-os/workbench-surface",
3
- "version": "0.0.44",
3
+ "version": "0.0.45",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "types": "./dist/index.d.ts",
@@ -34,10 +34,10 @@
34
34
  "@tutti-os/config-tsconfig": "0.0.0"
35
35
  },
36
36
  "dependencies": {
37
- "@tutti-os/ui-i18n-runtime": "0.0.44",
38
- "@tutti-os/ui-react-hooks": "0.0.44",
39
- "@tutti-os/workbench-snapshot": "0.0.44",
40
- "@tutti-os/ui-system": "0.0.44"
37
+ "@tutti-os/ui-i18n-runtime": "0.0.45",
38
+ "@tutti-os/ui-react-hooks": "0.0.45",
39
+ "@tutti-os/workbench-snapshot": "0.0.45",
40
+ "@tutti-os/ui-system": "0.0.45"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "^19.1.0",