@vscode/markdown-editor 0.0.2-72 → 0.0.2-74

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vscode/markdown-editor",
3
- "version": "0.0.2-72",
3
+ "version": "0.0.2-74",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -111,5 +111,5 @@
111
111
  "vitest": "^4.1.0",
112
112
  "zod": "^4.3.6"
113
113
  },
114
- "gitHead": "cbb52cf00fdfde3dbf58393f21ee56592bcf5c6d"
114
+ "gitHead": "3ef7111f4773490b2cd36ac9fb96c467e184dca1"
115
115
  }
@@ -143,6 +143,532 @@
143
143
  text-decoration: none;
144
144
  }
145
145
 
146
+ .md-rich-link {
147
+ display: inline-flex;
148
+ align-items: baseline;
149
+ max-width: min(100%, 52rem);
150
+ box-sizing: border-box;
151
+ gap: 0.24em;
152
+ padding: 1px 0.3em;
153
+ border: 1px solid color-mix(in srgb, var(--vscode-textLink-foreground, #0969da) 24%, transparent);
154
+ border-radius: 0.3em;
155
+ background: var(--vscode-button-secondaryBackground, #f3f3f3);
156
+ color: inherit;
157
+ font-size: 1em;
158
+ line-height: 1.25;
159
+ text-decoration: none;
160
+ vertical-align: baseline;
161
+ white-space: nowrap;
162
+ cursor: pointer;
163
+ --md-rich-link-success-color: var(--vscode-charts-green, #1f883d);
164
+ }
165
+
166
+ .md-rich-link:hover {
167
+ border-color: var(--vscode-focusBorder, color-mix(in srgb, currentColor 42%, transparent));
168
+ background: var(--vscode-button-secondaryHoverBackground, #e5e5e5);
169
+ text-decoration: none;
170
+ }
171
+
172
+ .md-rich-link:focus-visible {
173
+ outline: 1px solid var(--vscode-focusBorder, currentColor);
174
+ outline-offset: 1px;
175
+ }
176
+
177
+ .md-rich-link-icon {
178
+ flex: none;
179
+ align-self: center;
180
+ font-size: 0.92em;
181
+ color: color-mix(in srgb, var(--vscode-textLink-foreground, #0969da) 78%, currentColor);
182
+ }
183
+
184
+ .md-rich-link-label,
185
+ .md-rich-link-title,
186
+ .md-rich-link-detail {
187
+ overflow: hidden;
188
+ text-overflow: ellipsis;
189
+ }
190
+
191
+ .md-rich-link-label,
192
+ .md-rich-link-title {
193
+ flex: 0 1 auto;
194
+ min-width: 0;
195
+ color: var(--vscode-textLink-foreground, currentColor);
196
+ font-weight: 600;
197
+ }
198
+
199
+ .md-rich-link-title {
200
+ max-width: 200px;
201
+ }
202
+
203
+ .md-rich-link[data-md-rich-link-kind='session'] :is(.md-rich-link-label, .md-rich-link-title) {
204
+ max-width: 150px;
205
+ }
206
+
207
+ .md-rich-link-label[hidden],
208
+ .md-rich-link-title[hidden],
209
+ .md-rich-link-reference[hidden] {
210
+ display: none;
211
+ }
212
+
213
+ .md-rich-link-reference {
214
+ flex: none;
215
+ color: var(--vscode-descriptionForeground, color-mix(in srgb, currentColor 72%, transparent));
216
+ font-size: 0.92em;
217
+ }
218
+
219
+ .md-rich-link-detail {
220
+ flex: 1 1 auto;
221
+ min-width: 1.5em;
222
+ color: var(--vscode-descriptionForeground, color-mix(in srgb, currentColor 72%, transparent));
223
+ font-size: 0.92em;
224
+ }
225
+
226
+ .md-rich-link-detail::before {
227
+ content: '·';
228
+ margin-right: 0.28em;
229
+ }
230
+
231
+ .md-rich-link-status {
232
+ flex: none;
233
+ display: inline-flex;
234
+ align-self: center;
235
+ align-items: center;
236
+ gap: 0.22em;
237
+ height: 1.25em;
238
+ box-sizing: border-box;
239
+ margin-left: 0.04em;
240
+ padding: 0 0.38em;
241
+ border: 1px solid color-mix(in srgb, currentColor 44%, transparent);
242
+ border-radius: 1em;
243
+ background: color-mix(in srgb, currentColor 9%, transparent);
244
+ color: var(--vscode-descriptionForeground, currentColor);
245
+ font-size: 0.86em;
246
+ font-weight: 600;
247
+ line-height: 1;
248
+ }
249
+
250
+ .md-rich-link-detail[hidden],
251
+ .md-rich-link-status[hidden] {
252
+ display: none;
253
+ }
254
+
255
+ .md-rich-link-status-icon {
256
+ flex: none;
257
+ align-self: center;
258
+ font-size: 1em;
259
+ }
260
+
261
+ .md-rich-link:is(
262
+ [data-md-rich-link-status='open'],
263
+ [data-md-rich-link-status='closed'],
264
+ [data-md-rich-link-status='merged'],
265
+ [data-md-rich-link-status='draft'],
266
+ [data-md-rich-link-status='notPlanned']
267
+ ) .md-rich-link-primary-status {
268
+ color: var(--md-rich-link-state-color);
269
+ }
270
+
271
+ .md-rich-link-secondary-status {
272
+ margin-left: 0.06em;
273
+ padding: 0;
274
+ border: 0;
275
+ border-radius: 0;
276
+ background: transparent;
277
+ }
278
+
279
+ .md-rich-link-secondary-status::before {
280
+ content: '·';
281
+ margin-right: 0.08em;
282
+ color: var(--vscode-descriptionForeground, currentColor);
283
+ font-weight: 400;
284
+ }
285
+
286
+ .md-rich-link:is(
287
+ [data-md-rich-link-status='open'],
288
+ [data-md-rich-link-status='closed'],
289
+ [data-md-rich-link-status='merged'],
290
+ [data-md-rich-link-status='draft'],
291
+ [data-md-rich-link-status='notPlanned']
292
+ ) .md-rich-link-primary-status {
293
+ align-self: baseline;
294
+ padding: 0;
295
+ border: 0;
296
+ border-radius: 0;
297
+ background: transparent;
298
+ font-size: 1em;
299
+ line-height: inherit;
300
+ }
301
+
302
+ .md-rich-link[data-md-rich-link-status='success'] .md-rich-link-primary-status {
303
+ color: var(--vscode-charts-green, #1f883d);
304
+ }
305
+
306
+ .md-rich-link[data-md-rich-link-secondary-status='success'] .md-rich-link-secondary-status {
307
+ color: var(--md-rich-link-success-color);
308
+ }
309
+
310
+ .md-rich-link[data-md-rich-link-status='warning'] .md-rich-link-primary-status,
311
+ .md-rich-link[data-md-rich-link-secondary-status='warning'] .md-rich-link-secondary-status {
312
+ color: var(--vscode-editorWarning-foreground, #bf8700);
313
+ }
314
+
315
+ .md-rich-link[data-md-rich-link-status='error'] .md-rich-link-primary-status,
316
+ .md-rich-link[data-md-rich-link-secondary-status='error'] .md-rich-link-secondary-status {
317
+ color: var(--vscode-errorForeground, #cf222e);
318
+ }
319
+
320
+ .md-rich-link[data-md-rich-link-status='pending'] .md-rich-link-primary-status,
321
+ .md-rich-link[data-md-rich-link-secondary-status='pending'] .md-rich-link-secondary-status {
322
+ color: var(--vscode-editorWarning-foreground, #bf8700);
323
+ }
324
+
325
+ .md-rich-link[data-md-rich-link-kind='issue'] .md-rich-link-primary-status .md-rich-link-status-label,
326
+ .md-rich-link[data-md-rich-link-kind='pullRequest'] :is(
327
+ .md-rich-link-primary-status,
328
+ .md-rich-link-secondary-status
329
+ ) .md-rich-link-status-label {
330
+ display: none;
331
+ }
332
+
333
+ .md-rich-link[data-md-rich-link-status='open'] {
334
+ --md-rich-link-state-color: var(--vscode-charts-green, #1f883d);
335
+ }
336
+
337
+ .md-rich-link[data-md-rich-link-kind='issue'][data-md-rich-link-status='closed'],
338
+ .md-rich-link[data-md-rich-link-status='merged'] {
339
+ --md-rich-link-state-color: var(--vscode-charts-purple, #8250df);
340
+ }
341
+
342
+ .md-rich-link[data-md-rich-link-kind='pullRequest'][data-md-rich-link-status='closed'] {
343
+ --md-rich-link-state-color: var(--vscode-charts-red, #cf222e);
344
+ }
345
+
346
+ .md-rich-link[data-md-rich-link-status='draft'],
347
+ .md-rich-link[data-md-rich-link-status='notPlanned'] {
348
+ --md-rich-link-state-color: var(--vscode-descriptionForeground, #656d76);
349
+ }
350
+
351
+ .md-rich-link[data-md-rich-link-kind='pullRequest'][data-md-rich-link-secondary-status='error'] .md-rich-link-secondary-status {
352
+ color: var(--vscode-charts-red, var(--vscode-errorForeground, #cf222e));
353
+ }
354
+
355
+ .md-rich-link:is(
356
+ [data-md-rich-link-kind='issue'],
357
+ [data-md-rich-link-kind='pullRequest']
358
+ ) {
359
+ align-items: center;
360
+ gap: 4px;
361
+ padding: 1px 6px;
362
+ border-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent));
363
+ border-radius: 4px;
364
+ background: var(--vscode-button-secondaryBackground, #f3f3f3);
365
+ color: var(--vscode-button-secondaryForeground, #242424);
366
+ font-size: 1em;
367
+ line-height: 1.25;
368
+ vertical-align: -0.5px;
369
+ }
370
+
371
+ .md-rich-link:is(
372
+ [data-md-rich-link-kind='issue'],
373
+ [data-md-rich-link-kind='pullRequest']
374
+ ):hover {
375
+ border-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent));
376
+ background: var(--vscode-button-secondaryHoverBackground, #e5e5e5);
377
+ color: var(--vscode-button-secondaryForeground, #242424);
378
+ }
379
+
380
+ .md-rich-link:is(
381
+ [data-md-rich-link-kind='issue'],
382
+ [data-md-rich-link-kind='pullRequest']
383
+ ) .md-rich-link-reference {
384
+ display: none;
385
+ }
386
+
387
+ .md-rich-link:is(
388
+ [data-md-rich-link-kind='issue'],
389
+ [data-md-rich-link-kind='pullRequest']
390
+ ) :is(
391
+ .md-rich-link-label,
392
+ .md-rich-link-title,
393
+ .md-rich-link-primary-status,
394
+ .md-rich-link-secondary-status
395
+ ) {
396
+ align-self: center;
397
+ font-size: inherit;
398
+ line-height: inherit;
399
+ }
400
+
401
+ .md-rich-link:is(
402
+ [data-md-rich-link-kind='issue'],
403
+ [data-md-rich-link-kind='pullRequest']
404
+ ) :is(.md-rich-link-label, .md-rich-link-title) {
405
+ position: relative;
406
+ top: 0.25px;
407
+ max-width: 200px;
408
+ color: inherit;
409
+ font-weight: 400;
410
+ }
411
+
412
+ .md-rich-link:is(
413
+ [data-md-rich-link-kind='issue'],
414
+ [data-md-rich-link-kind='pullRequest']
415
+ ) .md-rich-link-status {
416
+ align-items: center;
417
+ height: 1.25em;
418
+ }
419
+
420
+ .md-rich-link:is(
421
+ [data-md-rich-link-kind='issue'],
422
+ [data-md-rich-link-kind='pullRequest']
423
+ ) .md-rich-link-status-icon {
424
+ display: inline-flex;
425
+ align-items: center;
426
+ justify-content: center;
427
+ width: 12px;
428
+ height: 12px;
429
+ font-size: 12px;
430
+ line-height: 12px;
431
+ }
432
+
433
+ .md-rich-link:is(
434
+ [data-md-rich-link-kind='issue'],
435
+ [data-md-rich-link-kind='pullRequest']
436
+ ) .md-rich-link-secondary-status::before {
437
+ align-self: center;
438
+ line-height: inherit;
439
+ }
440
+
441
+ .md-rich-link[data-md-rich-link-kind='session'] {
442
+ align-items: center;
443
+ gap: 4px;
444
+ padding: 1px 6px;
445
+ border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, color-mix(in srgb, currentColor 24%, transparent)));
446
+ border-radius: 4px;
447
+ background: var(--vscode-button-secondaryBackground, #f3f3f3);
448
+ color: var(--vscode-descriptionForeground, #656d76);
449
+ font-size: 1em;
450
+ font-weight: var(--vscode-agents-fontWeight-regular, 400);
451
+ line-height: 1.25;
452
+ vertical-align: baseline;
453
+ }
454
+
455
+ .md-rich-link[data-md-rich-link-kind='session']:hover {
456
+ border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, color-mix(in srgb, currentColor 24%, transparent)));
457
+ background: var(--vscode-toolbar-hoverBackground, color-mix(in srgb, currentColor 8%, transparent));
458
+ }
459
+
460
+ .md-rich-link[data-md-rich-link-kind='session'] :is(.md-rich-link-label, .md-rich-link-title) {
461
+ color: inherit;
462
+ font-weight: 400;
463
+ }
464
+
465
+ .md-rich-link[data-md-rich-link-kind='session'] .md-rich-link-primary-status {
466
+ align-self: center;
467
+ align-items: center;
468
+ width: 12px;
469
+ height: 12px;
470
+ margin: 0;
471
+ padding: 0;
472
+ border: 0;
473
+ border-radius: 0;
474
+ background: transparent;
475
+ font-size: 1em;
476
+ line-height: inherit;
477
+ }
478
+
479
+ .md-rich-link[data-md-rich-link-kind='session'] .md-rich-link-primary-status .md-rich-link-status-label {
480
+ display: none;
481
+ }
482
+
483
+ .md-rich-link[data-md-rich-link-kind='session'] .md-rich-link-status-icon:not(.monaco-pixel-spinner, [hidden]) {
484
+ display: inline-flex;
485
+ align-items: center;
486
+ justify-content: center;
487
+ width: 12px;
488
+ height: 12px;
489
+ font-size: 12px;
490
+ line-height: 12px;
491
+ }
492
+
493
+ .md-rich-link .md-rich-link-status-icon[hidden] {
494
+ display: none;
495
+ }
496
+
497
+ .md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='neutral'] .md-rich-link-primary-status,
498
+ .md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='success'] .md-rich-link-primary-status,
499
+ .md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='pending'] .md-rich-link-primary-status {
500
+ color: var(--vscode-descriptionForeground, #656d76);
501
+ }
502
+
503
+ .md-rich-link .monaco-pixel-spinner {
504
+ display: inline-grid;
505
+ grid-template-columns: repeat(2, 2px);
506
+ grid-template-rows: repeat(3, 2px);
507
+ column-gap: 2px;
508
+ row-gap: 2px;
509
+ place-content: center;
510
+ width: 16px;
511
+ height: 16px;
512
+ color: currentColor;
513
+ contain: layout style size paint;
514
+ isolation: isolate;
515
+ pointer-events: none;
516
+ transform: translateZ(0);
517
+ }
518
+
519
+ .md-rich-link[data-md-rich-link-kind='session'] .monaco-pixel-spinner {
520
+ width: 12px;
521
+ height: 12px;
522
+ }
523
+
524
+ .md-rich-link .monaco-pixel-spinner-dot {
525
+ display: block;
526
+ width: 2px;
527
+ height: 2px;
528
+ border-radius: 50%;
529
+ background-color: currentColor;
530
+ opacity: 0;
531
+ transform: translateY(-4px);
532
+ animation: monaco-pixel-spinner-dot-cycle 1820ms steps(6, jump-none) infinite;
533
+ }
534
+
535
+ .md-rich-link .monaco-pixel-spinner-dot:nth-child(1) {
536
+ animation-delay: 520ms;
537
+ }
538
+
539
+ .md-rich-link .monaco-pixel-spinner-dot:nth-child(2) {
540
+ animation-delay: 650ms;
541
+ }
542
+
543
+ .md-rich-link .monaco-pixel-spinner-dot:nth-child(3) {
544
+ animation-delay: 260ms;
545
+ }
546
+
547
+ .md-rich-link .monaco-pixel-spinner-dot:nth-child(4) {
548
+ animation-delay: 390ms;
549
+ }
550
+
551
+ .md-rich-link .monaco-pixel-spinner-dot:nth-child(5) {
552
+ animation-name: monaco-pixel-spinner-dot-cycle-long;
553
+ }
554
+
555
+ .md-rich-link .monaco-pixel-spinner-dot:nth-child(6) {
556
+ animation-name: monaco-pixel-spinner-dot-cycle-short;
557
+ animation-delay: 130ms;
558
+ }
559
+
560
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot {
561
+ opacity: 0.25;
562
+ transform: none;
563
+ animation: monaco-pixel-spinner-ring-pulse 1200ms steps(4, jump-none) infinite;
564
+ }
565
+
566
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(1) {
567
+ animation-delay: 0ms;
568
+ }
569
+
570
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(2) {
571
+ animation-delay: 200ms;
572
+ }
573
+
574
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(3) {
575
+ animation-delay: 1000ms;
576
+ }
577
+
578
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(4) {
579
+ animation-delay: 400ms;
580
+ }
581
+
582
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(5) {
583
+ animation-delay: 800ms;
584
+ }
585
+
586
+ .md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(6) {
587
+ animation-delay: 600ms;
588
+ }
589
+
590
+ @keyframes monaco-pixel-spinner-dot-cycle {
591
+ 0% {
592
+ opacity: 0;
593
+ transform: translateY(-4px);
594
+ }
595
+ 9.34%, 57.14% {
596
+ opacity: 1;
597
+ transform: translateY(0);
598
+ }
599
+ 66.48%, 100% {
600
+ opacity: 0;
601
+ transform: translateY(7px);
602
+ }
603
+ }
604
+
605
+ @keyframes monaco-pixel-spinner-dot-cycle-long {
606
+ 0% {
607
+ opacity: 0;
608
+ transform: translateY(-4px);
609
+ }
610
+ 9.34%, 64.29% {
611
+ opacity: 1;
612
+ transform: translateY(0);
613
+ }
614
+ 73.63%, 100% {
615
+ opacity: 0;
616
+ transform: translateY(7px);
617
+ }
618
+ }
619
+
620
+ @keyframes monaco-pixel-spinner-dot-cycle-short {
621
+ 0% {
622
+ opacity: 0;
623
+ transform: translateY(-4px);
624
+ }
625
+ 9.34%, 50% {
626
+ opacity: 1;
627
+ transform: translateY(0);
628
+ }
629
+ 59.34%, 100% {
630
+ opacity: 0;
631
+ transform: translateY(7px);
632
+ }
633
+ }
634
+
635
+ @keyframes monaco-pixel-spinner-ring-pulse {
636
+ 0%, 100% {
637
+ opacity: 0.25;
638
+ transform: none;
639
+ }
640
+ 16.67% {
641
+ opacity: 1;
642
+ transform: none;
643
+ }
644
+ }
645
+
646
+ @media (prefers-reduced-motion: reduce) {
647
+ .md-rich-link .monaco-pixel-spinner-dot {
648
+ animation: none;
649
+ opacity: 1;
650
+ transform: translateY(0);
651
+ }
652
+ }
653
+
654
+ .md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='warning'] .md-rich-link-primary-status {
655
+ color: var(--vscode-list-warningForeground, #855f00);
656
+ }
657
+
658
+ .md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='warning'] {
659
+ border-color: var(--vscode-list-warningForeground, #855f00);
660
+ background-color: color-mix(in srgb, var(--vscode-list-warningForeground, #855f00) 12%, transparent);
661
+ color: var(--vscode-list-warningForeground, #855f00);
662
+ }
663
+
664
+ .md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='error'] .md-rich-link-primary-status {
665
+ color: var(--vscode-errorForeground, #cf222e);
666
+ }
667
+
668
+ .md-rich-link-unavailable {
669
+ border-style: dashed;
670
+ }
671
+
146
672
  .md-fence-spacer {
147
673
  visibility: hidden;
148
674
  font-family: 'Cascadia Code', 'Fira Code', monospace;
@@ -847,14 +1373,20 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
847
1373
  }
848
1374
 
849
1375
  /*
850
- * Reserve the marker column after the `[x]`/`[ ]` source marker (the first glue
851
- * in a task item's paragraph) so the rendered checkbox widget overlaid on it has
852
- * a comfortable gap before the text. The fixed width applies in both active and
853
- * inactive states, so the first text character does not drift horizontally when
854
- * markers toggle (see the compare fixture's `checkMarkedTextX` assertion).
1376
+ * Reserve the marker column on the paragraph rather than only on its first
1377
+ * inline child. This gives every wrapped line the same content edge. The
1378
+ * source marker glue is positioned over that reserved column, as is the
1379
+ * rendered checkbox, so activating the item does not shift its text (see the
1380
+ * compare fixture's `checkMarkedTextX` assertion).
855
1381
  */
856
- .md-task-list-item .md-paragraph>.md-glue:first-child {
857
- display: inline-block;
1382
+ .md-task-list-item>.md-paragraph {
1383
+ padding-left: var(--md-task-marker-width);
1384
+ }
1385
+
1386
+ .md-task-list-item>.md-paragraph>.md-glue:first-child {
1387
+ position: absolute;
1388
+ top: 0;
1389
+ left: 0;
858
1390
  width: var(--md-task-marker-width);
859
1391
  }
860
1392
 
@@ -905,6 +1437,59 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
905
1437
  border-color: #888;
906
1438
  }
907
1439
 
1440
+ /*
1441
+ * The rotating "broken rounded-square" progress ring for an inactive task item
1442
+ * whose text begins with the hidden `:running:` marker (see
1443
+ * `ListItemViewData.isRunning`). Rendered as a conic-gradient ring — masked so
1444
+ * only the ring (not its center) paints — with a transparent gap that spins via
1445
+ * an animated `@property` angle, reading as a segmented spinner rather than a
1446
+ * checked/unchecked box. The base checkbox border/background are hidden so
1447
+ * only the ring shows.
1448
+ */
1449
+ .md-checkbox-running,
1450
+ .md-checkbox-running:checked {
1451
+ background: transparent;
1452
+ border-color: transparent;
1453
+ opacity: 1;
1454
+ }
1455
+
1456
+ @property --md-checkbox-spinner-angle {
1457
+ syntax: '<angle>';
1458
+ inherits: false;
1459
+ initial-value: 0deg;
1460
+ }
1461
+
1462
+ .md-checkbox-running::after,
1463
+ .md-checkbox-running:checked::after {
1464
+ content: '';
1465
+ position: absolute;
1466
+ inset: -1px;
1467
+ padding: 2px;
1468
+ width: auto;
1469
+ height: auto;
1470
+ border: 0;
1471
+ border-radius: 4px;
1472
+ background: conic-gradient(
1473
+ from var(--md-checkbox-spinner-angle),
1474
+ transparent 0deg 42deg,
1475
+ #bbb 62deg 360deg
1476
+ );
1477
+ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
1478
+ -webkit-mask-composite: xor;
1479
+ mask-composite: exclude;
1480
+ animation: md-checkbox-spin 0.8s linear infinite !important;
1481
+ }
1482
+
1483
+ @keyframes md-checkbox-spin {
1484
+ to {
1485
+ --md-checkbox-spinner-angle: 360deg;
1486
+ }
1487
+ }
1488
+
1489
+ .md-checkbox-running:hover {
1490
+ border-color: transparent;
1491
+ }
1492
+
908
1493
  .md-checkbox:checked:hover {
909
1494
  background-color: #3a73d4;
910
1495
  border-color: #3a73d4;
@@ -915,6 +1500,26 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
915
1500
  opacity: 0.6;
916
1501
  }
917
1502
 
1503
+ .md-checkbox-running:disabled {
1504
+ opacity: 1;
1505
+ }
1506
+
1507
+ @media (prefers-reduced-motion: reduce) {
1508
+ .md-checkbox-running::after {
1509
+ animation: none !important;
1510
+ }
1511
+ }
1512
+
1513
+ /*
1514
+ * The `:running:` marker hidden from an inactive task item's rendered text
1515
+ * (see `TextViewData.hiddenPrefixLength`). It stays real, selectable source —
1516
+ * only visually hidden, per "Hidden markers remain real source" — so it takes
1517
+ * no layout space in either state.
1518
+ */
1519
+ .md-runner-marker {
1520
+ display: none;
1521
+ }
1522
+
918
1523
  .md-cursor {
919
1524
  position: absolute;
920
1525
  width: 2px;