@vscode/markdown-editor 0.0.2-71 → 0.0.2-73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-71",
+  "version": "0.0.2-73",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -111,5 +111,5 @@
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
   },
-  "gitHead": "e0649851dcaeca57c3d992195dfd9774f4f42d50"
+  "gitHead": "199d6b94a718b97284c49caf62ed5c348743629a"
 }

package/src/view/editor.css

@@ -847,14 +847,20 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 }
 
 /*
- * Reserve the marker column after the `[x]`/`[ ]` source marker (the first glue
- * in a task item's paragraph) so the rendered checkbox widget overlaid on it has
- * a comfortable gap before the text. The fixed width applies in both active and
- * inactive states, so the first text character does not drift horizontally when
- * markers toggle (see the compare fixture's `checkMarkedTextX` assertion).
+ * Reserve the marker column on the paragraph rather than only on its first
+ * inline child. This gives every wrapped line the same content edge. The
+ * source marker glue is positioned over that reserved column, as is the
+ * rendered checkbox, so activating the item does not shift its text (see the
+ * compare fixture's `checkMarkedTextX` assertion).
  */
-.md-task-list-item .md-paragraph>.md-glue:first-child {
-	display: inline-block;
+.md-task-list-item>.md-paragraph {
+	padding-left: var(--md-task-marker-width);
+}
+
+.md-task-list-item>.md-paragraph>.md-glue:first-child {
+	position: absolute;
+	top: 0;
+	left: 0;
 	width: var(--md-task-marker-width);
 }
 
@@ -905,6 +911,59 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	border-color: #888;
 }
 
+/*
+ * The rotating "broken rounded-square" progress ring for an inactive task item
+ * whose text begins with the hidden `:running:` marker (see
+ * `ListItemViewData.isRunning`). Rendered as a conic-gradient ring — masked so
+ * only the ring (not its center) paints — with a transparent gap that spins via
+ * an animated `@property` angle, reading as a segmented spinner rather than a
+ * checked/unchecked box. The base checkbox border/background are hidden so
+ * only the ring shows.
+ */
+.md-checkbox-running,
+.md-checkbox-running:checked {
+	background: transparent;
+	border-color: transparent;
+	opacity: 1;
+}
+
+@property --md-checkbox-spinner-angle {
+	syntax: '<angle>';
+	inherits: false;
+	initial-value: 0deg;
+}
+
+.md-checkbox-running::after,
+.md-checkbox-running:checked::after {
+	content: '';
+	position: absolute;
+	inset: -1px;
+	padding: 2px;
+	width: auto;
+	height: auto;
+	border: 0;
+	border-radius: 4px;
+	background: conic-gradient(
+		from var(--md-checkbox-spinner-angle),
+		transparent 0deg 42deg,
+		#bbb 62deg 360deg
+	);
+	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask-composite: exclude;
+	animation: md-checkbox-spin 0.8s linear infinite !important;
+}
+
+@keyframes md-checkbox-spin {
+	to {
+		--md-checkbox-spinner-angle: 360deg;
+	}
+}
+
+.md-checkbox-running:hover {
+	border-color: transparent;
+}
+
 .md-checkbox:checked:hover {
 	background-color: #3a73d4;
 	border-color: #3a73d4;
@@ -915,6 +974,26 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	opacity: 0.6;
 }
 
+.md-checkbox-running:disabled {
+	opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.md-checkbox-running::after {
+		animation: none !important;
+	}
+}
+
+/*
+ * The `:running:` marker hidden from an inactive task item's rendered text
+ * (see `TextViewData.hiddenPrefixLength`). It stays real, selectable source —
+ * only visually hidden, per "Hidden markers remain real source" — so it takes
+ * no layout space in either state.
+ */
+.md-runner-marker {
+	display: none;
+}
+
 .md-cursor {
 	position: absolute;
 	width: 2px;